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

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

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.

2 Answers

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

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

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

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

Have another answer? Share your knowledge.