Related

Product App Platform: Run Node apps without managing servers Product
cpu from 13% to 100% in one minute Question Question
GUI for MongoDB needed to mange Meteor app Question Question

Question

Blocked by CORS policy: The 'Access-Control-Allow-Origin' - Mean Stack

Posted January 3, 2019 594.1k views
UbuntuNode.jsServer OptimizationMEAN

I have a application with front end as angular js and api in node.js. Lately, i am unable to use anything due to CORS policy issue. . I tried adding permission in apache virtual host , but nothing seems to be working . Following is the issue statement visible in console. Please help

Access to XMLHttpRequest at ’https://app.getmanagly.com:3008/login/member/validateMember’ from origin ’https://app.getmanagly.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ’https://app.getmanagly.com:3008’ that is not equal to the supplied origin.

Add a comment
infoc8fa8380fc94a1aac6aa70
By:
infoc8fa8380fc94a1aac6aa70

Related

Product App Platform: Run Node apps without managing servers Product
cpu from 13% to 100% in one minute Question Question
GUI for MongoDB needed to mange Meteor app Question Question

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
2 answers
AHA January 4, 2019

Forgive me if you already know this, but I’m giving all the info in case someone else has the same issue…

The CORS Access-Control-Allow-Origin line expects in one of these two formats:

Allow everything: probably not what you want

Access-Control-Allow-Origin: *

Allow a single specific origin:

Access-Control-Allow-Origin: [SCHEME]://[HOST]:[PORT_OPTIONAL]
  • Scheme: AKA protocol, this can be HTTP, HTTPS .
  • Host: This has to exactly match the requesting origin, so subdomain.domain.com or domain.com
  • Port: [Optional, but important for you] Leaving the port out is the same as putting default port :80 if your scheme is HTTP and :443 if your scheme is HTTPS.

So I think the port is causing your issue: your config is currently only allowing requests from origin https://app.getmanagly.com:3008 and you need it to allow requests from https://app.getmanagly.com AKA https://app.getmanagly.com:443

Solution: you have three options

  1. Allow everything (might be helpful for testing, but not suggested)

    Header set Access-Control-Allow-Origin: *

  2. Remove the port (3008) to the CORS header in your apache config, so you ONLY allow requests from https://app.getmanagly.com

    Header set Access-Control-Allow-Origin: https://app.getmanagly.com

  3. Update Apache config to dynamically mirror the port of the requesting origin. This gets ugly because you can’t add multiple domains in Access-Control-Allow-Origin, so you have to dynamically set the header to match the requesting origin

    SetEnvIf Origin "https://app.getmanagly.com(:3008)?$" AccessControlAllowOrigin=$0
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

FINAL IMPORTANT STEPS:

In order for this to take effect, you need to reload apache AND enable headers

  1. Confirming that the config is valid apachectl -t
  2. If valid reload Apache sudo service apache2 reload or apachectl -k graceful
  3. Ensure mod_headers (Apache module that allows you to alter headers) is enabled by running a2enmod headers
Reply Report
  • infoc8fa8380fc94a1aac6aa70 January 4, 2019

    Thank you so much for such a elaborate explanation. I really appreciate it. But somehow it didn’t work. Kindly suggest if i am doing something wrong

    *SO we did two things *

    1. Node.js level changes . I added * just for testing to app.js file 
    As suggested, we have made the change in app.js at NodeJS level and set Access-Control-Allow-Origin to *.
Code Snippet:
app.use(function (req, res, next) {
  /*var err = new Error('Not Found');
   err.status = 404;
   next(err);*/

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', '*');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,X-Access-Token,XKey,Authorization');

//  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  // Pass to next layer of middleware
  next();
});
    1. I changed my virtual host in apache and added * there too for testing . BUt it didnt work. Still same error is coming like before . This is under /etc/apache2/sites-available/000-default.conf

    <VirtualHost *:443>
    ServerName app.getmanagly.com
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/hare_krishnanew
    ErrorLog ${APACHE_LOG_DIR}/error_app.log
    CustomLog ${APACHE_LOG_DIR}/access_app.log combined
    SSLEngine on
    SSLCertificateFile /home/ssl/star.getmanagly.com.crt
    SSLCertificateKeyFile /home/ssl/getmanagly.key
    SSLCACertificateFile /home/ssl/star.getmanagly.com.ca-bundle
    Header set Access-Control-Allow-Origin "*"
    </VirtualHost>

    The same error comes again

    Access to XMLHttpRequest at ’https://app.getmanagly.com:3008/login/member/validateMember’ from origin ’https://app.getmanagly.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ’https://app.getmanagly.com:3008’ that is not equal to the supplied origin.

    After that i tried everything in apache file instear of “*”
    https://app.getmanagly.com
    https://app.getmanagly.com:443
    https://app.getmanagly.com:3008

    nothing seems to be working

    Reply Report
    • AHA January 4, 2019

      It sounds like the changes you are making aren’t actually resulting in a change to the response headers.

      Each time you try making a change, test that it gets to the end-user by running something like
      curl -i -X POST https://app.getmanagly.com:3008/login/member/validateMember

      • -X POST - makes it a post request
      • -i - will output the response headers

      Do you see the updated Access-Control-Allow-Origin... line?

      Reply Report
      • infoc8fa8380fc94a1aac6aa70 January 5, 2019

        When i do the above i get the message 

         Failed to connect to app.getmanagly.com port 3008: Connection refused

        But When i do it without port
        I get through 

        ETag: "1437-56ddfd0287440"
Accept-Ranges: bytes
Content-Length: 5175
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
Content-Type: text/html

        so how do i give access to 3008 now ??

        Reply Report
infoc8fa8380fc94a1aac6aa70 January 18, 2019

@aha any luck over the problem …still stuck with this for long time :(

Reply Report
Submit an Answer

Related

Looking for something else?

Ask a new question Search for more help