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

January 3, 2019 143.5k views
Node.js MEAN Server Optimization Ubuntu
infoc8fa8380fc94a1aac6aa70
By:
infoc8fa8380fc94a1aac6aa70

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.

Log In to Comment
2 Answers
aha MOD 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
  • 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

    • aha MOD 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?

      • 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 ??

infoc8fa8380fc94a1aac6aa70 January 18, 2019

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

Reply
Have another answer? Share your knowledge.

Related Questions