Question

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

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.


Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

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.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

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: *
  1. 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
  1. 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

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