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.

<!-- language: lang-js -->

    $.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
      // some code...
    });

But when my app hit on URL, it shows the following message.

Failed to load http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26: Redirect from 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26' to 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Solution 1

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.

Solution 2

Thanks all, I solved by this extension on chrome.

Allow CORS: Access-Control-Allow-Origin

Solution 3

If you have control over your server, you can use PHP:

<?PHP
header('Access-Control-Allow-Origin: *');
?>

Solution 4

Ask the person maintaining the server at http://172.16.1.157:8002/ to add your hostname to Access-Control-Allow-Origin hosts, the server should return a header similar to the following with the response-

Access-Control-Allow-Origin: yourhostname:port

Solution 5

When you have this problem with Chrome, you don't need an Extension.
Start Chrome from the Console:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Maybe you have to close all Tabs in Chrome and restart it.

View more solutions

Comments

[user5014677]

@RoryMcCrossan it says origin is localhost, so cors get triggered. I think?

[Black]

Im not sure how to set it up, can you explain further? Screenshots would be nice.

[tw1742]

@altShiftDev Does this plugin have any options to handle: "Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."?

[kabrice]

The link is now broken :(

[Cyber]

broken link, no description at all.

[Cyber]

added into my .htaccess of local project and works like charm, don't forget to reboot your server / mamp / apache, whatever you use.

[Cyber]

better add to the .htaccess file, this would apply to the entire project and not just to the sites you have added this snippet.

[ewalel]

Thanks this helps to avoid all the hassle and test the code from localhost.

[Peter VARGA]

Update the link my friend!

[Jordan Noel]

chrome.google.com/webstore/detail/allow-cors-access-control/‌​…

[OM Bharatiya]

Hey, the chrome extension link provided is broken. Can you please update the answer?

[SJX]

You don't need an Extension for Chrome: stackoverflow.com/a/60950835/2280067

[Nitin Nanda]

the extension is just a temporary fix and not a solution to the problem

[MeVR]

may i know how to solve this from angular side?

[andromeda]

This is not a solution. Are you going to ask everyone to install a chrome extension?

[Mike Q]

This didn't seem to work for me, it broke the API call actually.

[Lepy]

Try to put your real ip instead of the localhost. Try to google your ip and replace 'localhost' with that @Black

[Jagadish Nallappa]

Thank you so much! This worked... Cheerio!

[Darius.V]

for me it does not even reach php script

[Kasyful Anwar]

This is an extension for Chrome

[Arslan Ahmad khan]

great suggetion

[Dogunbound hounds]

Doesn't work buddy.

[Vixxd]

A word of warning: the Moesif Origin & CORS Changer plug-in requires you enter a work-related e-mail address to access the advanced settings. I would not recommend.

[Pankaj Kumar]

Thanks,Thanks .... It solved my headache.