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.

Subscribe
Share

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

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.

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

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

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

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