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.

The issue is because the Same Origin Policy is preventing the response from being received due to the originating/receiving domains being different due to the port numbers. To fix this you'll need to return CORS headers in the response from `http://172.16.1.157:8002/firstcolumn/...`. Exactly how you do that will depend on what server side infrastructure you're using. — Rory McCrossan, Oct 02 '17 at 09:23
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Smittey, Oct 02 '17 at 09:24
In this case, Origin A does GET request to Origin B ; the response redirects to a different location in Origin B. The solution is to trick Chrome into thinking Origin B is Origin A. What if Origin B redirected to Origin C; can we direct to any Origin C, or must we trick Origin C to appear as Origin A? I think we **can** redirect to any Origin C (for example redirect to a third party single-signon page, or to www.stackoverflow.com ) , regardless of Origin A or the Origin C's `Access-Control-Allow-Origin` header) — Nate Anderson, Oct 03 '18 at 14:31
In my case, none of the answers worked, and at the end it turned out to be an error on my middleware ( in local server). In case it helps someone — Berni, Oct 18 '21 at 16:53

altShiftDev · Accepted Answer · 2023-03-07T20:45:43.157

106

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~~ (use to be free but now wants a work email address >_>)
Allow CORS: Access-Control-Allow-Origin (tested in 2023)

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.

In case the 2nd plugin link breaks in the future or the plugin writer decides to capitalize off the fame of this thread, open your browser's plugin marketplace and search "allow cors", there's going to be a bunch of them.

edited Mar 07 '23 at 20:45

answered Oct 02 '17 at 16:32

altShiftDev

1,564
1
9
20

11

Im not sure how to set it up, can you explain further? Screenshots would be nice. – Black Apr 23 '18 at 08:26
@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."? – tw1742 Dec 20 '18 at 23:17
Try to put your real ip instead of the localhost. Try to google your ip and replace 'localhost' with that @Black – Lepy Apr 28 '21 at 07:46
2

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. – Vixxd Jan 13 '22 at 21:02

score 47 · Answer 2 · edited Jan 28 '20 at 08:23

47

Thanks all, I solved by this extension on chrome.

Allow CORS: Access-Control-Allow-Origin

edited Jan 28 '20 at 08:23

OM Bharatiya

1,840
14
23

answered Oct 02 '17 at 16:35

Parkar

2,800
3
15
24

7

The link is now broken :( – kabrice Oct 07 '19 at 00:09
2

broken link, no description at all. – Cyber Dec 28 '19 at 21:53
1

Update the link my friend! – Peter VARGA Jan 09 '20 at 09:14
2

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf – Jordan Noel Jan 13 '20 at 16:09
You don't need an Extension for Chrome: https://stackoverflow.com/a/60950835/2280067 – SJX Mar 31 '20 at 12:43
34

the extension is just a temporary fix and not a solution to the problem – Nitin Nanda Oct 09 '20 at 02:36
11

This is not a solution. Are you going to ask everyone to install a chrome extension? – andromeda Feb 19 '21 at 21:00
This is an extension for Chrome – Kasyful Anwar Sep 11 '21 at 04:16
What if it still doesn't work? The plugin shows that CORS is allowed, but the client request is still blocked by CORS policy. What might be happening? – Joshua S Feb 09 '23 at 18:36
How does this extension work? Why does is work with this extension turned on? Is there any way to implement this method directly to my website? Unfotunately I do not have permission to change server settings. – wepli23 Mar 14 '23 at 19:38

score 24 · Answer 3 · answered Jul 23 '19 at 15:23

24

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

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

answered Jul 23 '19 at 15:23

Kardi Teknomo

1,375
16
24

1

better add to the .htaccess file, this would apply to the entire project and not just to the sites you have added this snippet. – Cyber Dec 28 '19 at 21:57
may i know how to solve this from angular side? – mevr Feb 11 '21 at 07:44
for me it does not even reach php script – Darius.V Sep 01 '21 at 14:47
[.htaccess - htaccess Access-Control-Allow-Origin - Stack Overflow](https://stackoverflow.com/questions/13421463/htaccess-access-control-allow-origin) – eapo Jan 07 '23 at 01:32

score 17 · Answer 4 · edited May 21 '21 at 22:15

17

Using npm:

To allow cross-origin requests install 'cors':

npm i cors

Add this in the server-side:

let cors = require("cors");
app.use(cors());

edited May 21 '21 at 22:15

Community

1
1

answered Jun 05 '20 at 17:01

Amine Zel

391
3
15

1

does not working – Vasim Shaikh Jul 21 '22 at 06:52

score 16 · Answer 5 · edited Dec 15 '18 at 18:13

16

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

edited Dec 15 '18 at 18:13

Nicholas K

15,148
7
31
57

answered Oct 02 '17 at 09:23

awd

2,302
1
22
29

@RoryMcCrossan it says origin is localhost, so cors get triggered. I think? – user5014677 Oct 02 '17 at 09:29

score 15 · Answer 6 · edited Mar 16 '23 at 08:52

I will assume that you're a front-end developer only and that you don't have access to the backend of the application (regarding the tags of the question).

Short answer on how to properly solve this in your case? You can't, you'll need somebody else.

What is this about?

You need to understand that CORS is a security thing, it's not just here to annoy you just for fun.
It's purpose is to mainly prevent the usage of a (malicious) HTTP call from a non-whitelisted frontend to your backend with some critical mutation.

You could give a look to this YouTube video or any other one really, but I recommend a visual video because text-based explanations can be quite hard to understand.

You also need to understand that if you use Postman or any other tool to try your API call, you will not get the CORS issue. The reason being that those tools are not Web frontends but rather some server-based tools.

Hence, don't be surprised if something is working there but not in your Vue app, the context is different.

Now, how to solve this?

Depending on the framework used by your backend team, the syntax may be quite different but overall, you'll need to tell them to provide something like Access-Control-Allow-Origin: http://localhost:3000 (or any other port you'll be using).

PS: Using Access-Control-Allow-Origin: * would be quite risky because it would allow anybody to access it, hence why a stricter rule is recommended.

If you're using a service, like an API to send SMS, payment, some Google console or something else really, you'll need to allow your localhost in the dashboard of the service. Ask for credentials to your manager or Tech Lead.
If you have access to the backend, you could it yourself as shown here (ExpressJS in this example): https://flaviocopes.com/cors/

How to hack it in a dirty way?

If you're in a damn hurry and want to get something really dirty, you could use a lot of various hacks a listed in the other answers, here's a quick list:

use any extension who is able to create a middleware and forward the request to the backend (it will work because it's not directly coming from your frontend)
force your browser to disable CORS, not sure how this would actually solve the issue
use a proxy, if you're using Nuxt2, @nuxtjs/proxy is a popular one but any kind of proxy (even a real backend will do the job)
any other hack related somehow to the 3 listed above...

In the end, solving the CORS issue can be done quite fast and easily. You only need to communicate with your team or find something on your side (if you have access to the backend/admin dashboard of some service).

I strongly recommend trying to get it right from the beginning because it's related to security and that it may be forgotten down the road...

score 14 · Answer 7 · answered Mar 31 '20 at 12:42

14

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.

answered Mar 31 '20 at 12:42

SJX

1,071
14
15

1

Simple and perfect. My full path was like this: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome dev session" --disable-web-security – Sean Aug 28 '22 at 19:24

score 14 · Answer 8 · edited Jun 08 '22 at 14:53

14

The approved answer to this question is not valid.

You need to set headers on your server-side code

app.use((req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
    res.setHeader('Access-Control-Allow-Methods','Content-Type','Authorization');
    next(); 
})

You can also try a chrome extension to add these headers automatically.

edited Jun 08 '22 at 14:53

Nate Schultz

181
1
14

answered Jan 01 '21 at 09:41

Berke Kaan Cetinkaya

798
5
19

4

I have these set in the header. I am still getting the CORS error. – Andy N Oct 06 '22 at 00:58
You might need to name the policy and add [EnableCors()] to the server controller – Peter Chikov Apr 04 '23 at 14:04

score 10 · Answer 9 · answered Oct 02 '17 at 09:25

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.

score 8 · Answer 10 · answered Jan 21 '19 at 09:10

8

To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory>, <Location>, <Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

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

And then restart apache.

Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it's enabled.

answered Jan 21 '19 at 09:10

Pankaj Shinde

3,361
2
35
44

1

added into my `.htaccess` of local project and works like charm, don't forget to reboot your server / mamp / apache, whatever you use. – Cyber Dec 28 '19 at 21:56
[.htaccess - htaccess Access-Control-Allow-Origin - Stack Overflow](https://stackoverflow.com/questions/13421463/htaccess-access-control-allow-origin) – eapo Jan 07 '23 at 01:32

score 5 · Answer 11 · answered Jul 26 '19 at 09:13

I had the same problem in my Vue.js and SpringBoot projects. If somebody work with spring you can add this code:

@Bean
public FilterRegistrationBean simpleCorsFilter() {  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
    CorsConfiguration config = new CorsConfiguration();  
    config.setAllowCredentials(true); 
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
    config.setAllowedMethods(Collections.singletonList("*"));  
    config.setAllowedHeaders(Collections.singletonList("*"));  
    source.registerCorsConfiguration("/**", config);  
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
    return bean;  
}

I found solution in this article Build a Simple CRUD App with Spring Boot and Vue.js

score 4 · Answer 12 · edited Dec 15 '18 at 18:11

4

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.

edited Dec 15 '18 at 18:11

Nicholas K

15,148
7
31
57

answered Oct 03 '17 at 09:01

Manav Mandal

325
2
7

Hey, the chrome extension link provided is broken. Can you please update the answer? – OM Bharatiya Jan 28 '20 at 07:24

score 4 · Answer 13 · edited Nov 01 '19 at 09:35

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.

score 3 · Answer 14 · answered Nov 27 '20 at 10:23

3

Do specify @CrossOrigin(origins = "http://localhost:8081") in Controller class.

answered Nov 27 '20 at 10:23

Ajay Takur

6,079
5
39
55

score 2 · Answer 15 · edited Jan 28 '20 at 08:21

2

You can solve this temporarily by using the Firefox add-on, CORS Everywhere. Just open Firefox, press Ctrl+Shift+A , search the add-on and add it!

edited Jan 28 '20 at 08:21

OM Bharatiya

1,840
14
23

answered Nov 26 '18 at 13:49

Prabhash Rathnayake

63
7

1

Thanks this helps to avoid all the hassle and test the code from localhost. – ewalel Jan 03 '20 at 11:56

score 2 · Answer 16 · edited May 26 '20 at 19:52

You won't believe this, Make sure to add "." at the end of the "url"

I got a similar error with this code:

fetch(https://itunes.apple.com/search?term=jack+johnson)
.then( response => {
    return response.json();
})
.then(data => {
    console.log(data.results);
}).catch(error => console.log('Request failed:', error))

The error I got:

 Access to fetch at 'https://itunes.apple.com/search?term=jack+johnson'
 from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested
 resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But I realized after a lot of research that the problem was that I did not copy the right URL address from the iTunes API documentation.

It should have been

https://itunes.apple.com/search?term=jack+johnson.

not

https://itunes.apple.com/search?term=jack+johnson

Notice the dot at the end

There is a huge explanation about why the dot is important quoting issues about DNS and character encoding but the truth is you probably do not care. Try adding the dot it might work for you too.

When I added the "." everything worked like a charm.

I hope it works for you too.

This didn't seem to work for me, it broke the API call actually. — Mike Q, Mar 07 '21 at 01:08

score 2 · Answer 17 · answered Nov 05 '20 at 07:11

2

install:

npm i cors

Then include cors():

app.get("/list",cors(),(req,res) =>{

});

answered Nov 05 '20 at 07:11

Olu Teax

149
1
5

score 2 · Answer 18 · answered Jan 25 '22 at 08:02

In addition to the Berke Kaan Cetinkaya's answer.
If you have control over your server, you can do the following in ExpressJs:

app.use(function(req, res, next) {
// update to match the domain you will make the request from
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

https://enable-cors.org/server_expressjs.html

score 2 · Answer 19 · answered Jul 05 '22 at 01:37

2

I tried this code,and that works for me.You can see the documentation in this link

var io = require("socket.io")(http, {
cors: {
    origin: "*",
    methods: ["GET", "POST"]
   }
 })

answered Jul 05 '22 at 01:37

Tetereou Mouhammad Abdourazak

116
7

try this still getting error – Vasim Shaikh Jul 21 '22 at 06:54

score 2 · Answer 20 · answered Jun 13 '23 at 16:58

Reason for Error

This is a cross origin request because the address from which the request is made (in this case localhost:8080) is different from the one of the requested resource (172.16.1.157), hence the CORS issue

The error in this case denotes that the Access-Control-Allow-Origin is missing from the server's response.

This header is used by servers to denote which domains are allowed to request the resource that they are serving. All browsers throw an error when this header is absent during a cross origin request (which is the case here)

Possible solutions

A. If you are in control of the server, you could modify the response headers that the server sends to meet your use case.

B. But looking closely, it seems like you are debugging this locally, in which case it would be easier to use a browser extension that does this for you.

I use Requestly for debugging http related errors. This CORS issue can be solved by using their Header Rule.

Create a new Header Rule and configure it as such

Rule matching condition (where you want the rule to be applied): URL Contains 172.16.1.157
Select Response Headers
Select Override Response Headers
Set the Request Header as Access-Control-Allow-Origin
Set the header value as either * (to allow requests from all domains) or http://localhost:8080

Tristanisginger · Answer 21 · 2022-10-03T14:21:28.177

1

The reason that I came across this error was that I hadn't updated the path for different environments.

edited Oct 03 '22 at 14:21

answered Dec 01 '21 at 09:31

Tristanisginger

2,181
4
28
41

Our issue was folder permissions, even though we got this type of error. So it was a red herring for us. – MTMDev Apr 18 '23 at 18:00

score 0 · Answer 22 · answered Aug 06 '19 at 11:13

0

you have to customize security for your browser or allow permission through customizing security. (it is impractical for your local testing) to know more about please go through the link.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

answered Aug 06 '19 at 11:13

Aditya M

11
1

ganicvp7 · Answer 23 · 2021-04-11T13:05:07.017

These errors may be caused due to follow reasons, ensure the following steps are followed. To connect the local host with the local virtual machine(host). Here, I'am connecting http://localhost:3001/ to the http://abc.test Steps to be followed:

1.We have to allow CORS, placing Access-Control-Allow-Origin: in header of request may not work. Install a google extension which enables a CORS request.*

2.Make sure the credentials you provide in the request are valid.

3.Make sure the vagrant has been provisioned. Try vagrant up --provision this make the localhost connect to db of the homestead.

Try changing the content type of the header. header:{ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8;application/json' } this point is very important.

score 0 · Answer 24 · answered Dec 23 '22 at 22:14

Another solution to this problem in a specific scenario :

If

AWS APIGW is your backend with authentication enabled and
authentication fails,

your browser may end up complaining about CORS even if CORS is enabled in APIGW. You also need to enable CORS for 4XX as follows

API:YourAPI > Resources > /YourResource > Actions > Enable CORS > Gateway Responses for yourAPI check Default 4XX

Authentication will still fail but it won't look like CORS is the root cause

score -11 · Answer 25 · edited Sep 17 '18 at 08:40

-11

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

Just put "https" .

edited Sep 17 '18 at 08:40

4b0

21,981
30
95
142

answered Sep 17 '18 at 08:39

Ameen Farook

21
2

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

25 Answers25

What is this about?

Now, how to solve this?

How to hack it in a dirty way?

Reason for Error

Possible solutions

Linked

Related