Question

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

Posted January 3, 2019 452k 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.

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

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 :(

Submit an Answer