How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?

Question

I am working on an app using Vue js. According to my setting I need to pass to a variable to my URL when setting change.

Answer 1

Try running this command in your terminal and then test it again.

curl -H "origin: originHost" -v "RequestedResource"

Eg:

If my originHost equals https://localhost:8081/ and my RequestedResource equals https://example.com/

My command would be as below:

curl -H "origin: https://localhost:8081/" -v "https://example.com/"

If you can notice the following line then it should work for you.

< access-control-allow-origin: *

Hope this helps.

Answer 2

You are making a request to external domain 172.16.1.157:8002/ from your local development server that is why it is giving cross origin exception. Either you have to allow headers Access-Control-Allow-Origin:* in both frontend and backend or alternatively use this extension cors header toggle - chrome extension unless you host backend and frontend on the same domain.

Answer 3

In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this:

Moesif Orign & CORS Changer

You can make your local dev server (ex: localhost:8080) to appear to be coming from 172.16.1.157:8002 or any other domain.

Answer 4

Hello If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Answer 5

Simply by adding below text in the httpd.conf file will solve this issue.

Header set Access-Control-Allow-Origin "*"