ERROR : No "Access-Control-Allow-Origin" header is present

[Smurfy303]

I am trying google signIn using angular2 and nodejs where angular2 and nodejs are running on 4200 and 3000 port respectively.So, when I click on SignIn with Google(button) it throws me an error as:

XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…d=287790791492-gjuv677chmkmqih4v1p6fc3jti32v76q.apps.googleusercontent.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Although, I set headers on Node side...

I followed example on this link - https://github.com/kumartarun/JWT-with-Node-JS

How I solve this issue , will anyone please help me ??

[James-Quigley]

You're running into a CORS issue. See more here: https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource

[serudda]

Same issue. I can access if I use hyperlink, but with axios + sequelize, it's impossible

[bermick]

You have to set up the correct CORS options: https://www.npmjs.com/package/cors, mainly 'origin' and 'credentials'

[Shailu4u]

Same issue, not working with CORS as mentioned by @bermick as well. @bermick , can you please provide correct CORS options

[SEMeesha]

Try this, https://www.youtube.com/watch?v=L-hYd2DObTA&t=93s

[YuriiZadorozhnyi]

I have a problem with - Origin 'null' is therefore not allowed access. Any ideas how to solve it? Angular 5 - http://localhost:4000; API - http://localhost:3000;

[manjari188]

I also faced the same issue when I was using file path to run my file. It got solved on running on localhost.

[eshwarchettri]

@YuriiZadorozhnyi did you solved that issue?

[FernandoIbaePLiborio]

please, some example in angular consuming local api?

[Gennttii]

I am having same issue, is there any fix for this?

[DangDuy612]

I faced the same issue, and i tried SEMeesha solution but it did not work for me

[FernandoIbaePLiborio]

In the Web Api (backend) inside the Web.config between the </ system.webServer> tags, insert the http protocol ex:

`

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

</system.webServer> ` I hope I have helped someone

[ManoogD]

I have a problem with - Origin 'null' is therefore not allowed access. Any ideas how to solve it? Angular 5 - http://localhost:4000; API - http://localhost:3000;

I have the same error and 2 days I've spent for resolving but nothing work. Did you solve the problem?

[leeejungmin]

i have same problem Angularjs - localhost/symfonyjung/user.php symfony- localhost:8000.....

Failed to load http://localhost/symfonyjung/user.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

[sravaisridhara94]

I faced the same issue. Please follow the link below. It may help. https://www.youtube.com/watch?v=F9pGJRiuxo0

[leeejungmin]

Thank you! -----Original Message----- From: "sravaisridhara94"notifications@github.com To: "jaredhanson/passport"passport@noreply.github.com; Cc: "JUNGMIN LEE"dlwjdals6424@naver.com; "Comment"comment@noreply.github.com; Sent: 2018-09-29 (토) 01:43:28 Subject: Re: [jaredhanson/passport] ERROR : No "Access-Control-Allow-Origin" header is present (#582)

I faced the same issue. Please follow the link below. It may help. https://www.youtube.com/watch?v=F9pGJRiuxo0 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

same issue here but I couldnt resolve it help?

[Matiyeu]

Same issue with CORS

[vijayalaya]

In the Web Api (backend) inside the Web.config between the </ system.webServer> tags, insert the http protocol ex:

`

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

</system.webServer> ` I hope I have helped someone

It works for POST and GET. for PUT getting the below error. Any thoughts

[ifdouglas-zz]

Your Google button need to be an <a href=""> tag. If you're using a button, to call you server with some lib (like axios), you will get a CORS issue through the redirects inside the flow

I didn't see your code, but maybe you can try check this.

[dipunj]

@ifdouglas, I am starting to develop react applications so I'm a complete noob here. Can you please explain the difference between using an anchor tag and submitting a form using axios?

How are the two different?

why do I get a CORS when submitting via axios?

I have a

• frontend server: localhost:4000
• backend server: localhost:3000

when I GET a form at localhost:3000/auth/google_oauth2 from frontend server, I get a CORS. To fix that, I set the response headers from the backend application - Access-Control-Allow-Origin : 'http://localhost:4000'. After that, the error in the browser console changed to :

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fgoogle_oauth2%2Fcallback&response_type=code&scope=email+profile&state=' (redirected from 'http://localhost:3000/auth/google_oauth2') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[deivirobles]

I need help with this problem too. In my web.config added this property, but I can't access to my API Help please, thanks.

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

[hscanlan]

I have a problem with - Origin 'null' is therefore not allowed access. Any ideas how to solve it? Angular 5 - http://localhost:4000; API - http://localhost:3000;

Were you ever able to fix this? I have the null issue as well.

[kanejoe]

https://codeburst.io/react-authentication-with-twitter-google-facebook-and-github-862d59583105

This article helped me.

[riyastk]

@ifdouglas, I am starting to develop react applications so I'm a complete noob here. Can you please explain the difference between using an anchor tag and submitting a form using axios?

How are the two different?

why do I get a CORS when submitting via axios?

I have a

• frontend server: localhost:4000
• backend server: localhost:3000

when I GET a form at localhost:3000/auth/google_oauth2 from frontend server, I get a CORS. To fix that, I set the response headers from the backend application - Access-Control-Allow-Origin : 'http://localhost:4000'. After that, the error in the browser console changed to :

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fgoogle_oauth2%2Fcallback&response_type=code&scope=email+profile&state=' (redirected from 'http://localhost:3000/auth/google_oauth2') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

same issue. any solutions ??

[nidhigadhavi]

Access to script at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyBv5031L1Eo21PtleqFAezQFXYCQQVZMF4&libraries=places&callback=initMap' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Need Help Please :( :( :(

[kmkrish007]

I also facing issues in when getting files from Azure blob storage.

Access to XMLHttpRequest at 'filepath' from origin 'https://localhost:5001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

can anyone share solution for this.

[dieulinh]

I still get this error when send post request via axios, local development with Ruby on Rails, Webpack as bundler for React as frontend

[linehammer]

This is happening because of the CORS (Cross Origin Resource Sharing) . 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.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

If this is for local development and you are using Chrome , you need to run Chrome with a couple of arguments to relax security like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

More on...CORS

[Shoukatmalik96]

This fixed my problem .. thanks

[cooliscool]

For Angular, Node.js Express projects, I found this tutorial useful : https://medium.com/@alexishevia/using-cors-in-express-cac7e29b005b

[hong-werdna]

I was running into a fairly identical issue as the OP. However, I don't see his code for reference. I had a google signin button that utilized an action to make the api call to my express server. Kept getting CORS errors, and tried to configure this on my backend. My solution came by removing the e.preventDefault(); I had in my google button's callback onClick function.

[hasnaas]

I get the same error message when trying the oauth (with github and google). I am using angular (localhost:4200) and express (localhost:3000). All authentication logic is handled by my server using passport, the client only sends an http get request to the local server when the login button is clicked. Enabling CORS on the express server does not solve the issue. I tried relaxing security for chrome: I got no cors related error messages, but an "Http failure during parsing for https://accounts.google.com/signin/oauth..." I added a respons type parameter to my get request: this.http.get(this.url + "google", { responseType: 'text' }); Now I get the source code of the authentication page in the console, and no redirection happens.

any clues ?

[pintu-iitbhu]

I am getting similar error

Access to XMLHttpRequest at 'http://localhost:3000/api/uploads/status' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[dipunj]

For anyone still facing the error, here is some explanation which might improve your understanding.

First, this was my setup:

1. BackendServer : localhost:3000
2. FrontendServer: localhost:4000
3. Client Browser (on localhost)
4. Google oauth API endpoint

When i GET localhost:3000/auth/google_oauth2 directly in the client browser's address bar, the backend would see that the request came from a chrome browser and it would redirect the request to the google auth url(which I had programmed to do so)...so your browser would be asked to GET https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id= google auth url. But can it do so?

Yes/No. If the browser is cors enabled, it would make a pre-flight check (cors check) to the specified url(google-auth-url in this case), and get the access-control-allow-origin headers.

If this header contains the original address which caused this redirect (in this case localhost:3000) then it would not block the request, otherwise it throws the error (No Access-control-origin header is set....or the header doesn't match etc)

In my case I was wrongly modifying the backend server's response headers to

Access-control-allow-origin' : localhost:4000

which would mean that it should accept requests from localhost:4000. Which is alright, but not enough.

I need to configure the google auth endpoint also to allow redirections from localhost:3000, this is what I had not done. Once you configure your google-auth endpoint with response header: Access-control-allow-origin' : localhost:3000

Then this is how it would go from browser's pov:

Step 1. browser GETs localhost:3000/auth/google_oauth2 Step 2. localhost:3000 checks where this request is coming from, it is coming from localhost:chromeport, it asks(sends the response: redirect) the browser to go to https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id= Step 3: Browser sees the response and sees that it is being asked to go to GET https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id= Step 4: Browser makes a cors check to google's url, it sees that localhost:3000 is in access-control-allow-origin header, so it says okay, this is allowed.

Hope it helped. (PS: Feel free to correct me, if I got anything wrong)

[rsinghal1995]

Hi , i am facing same issue while calling a odata service from SAP screen personas script. Can you tell me how to fix this issue.

Thanks , Rashika

[rsinghal1995]

Hi , i am facing same issue while calling a odata service from SAP screen personas script. Can you tell me how to fix this issue.

Thanks , Rashika

[sivayenmin]

Access to XMLHttpRequest at 'https://ggggg-asdsdsd.uc.gateway.dev/all-user?key=AIzaSyCYZn960ddd8Ds2AuGszRPL8Nlwbgt-Q3I' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please Can you tell me how to fix this issue.

[sshilko]

I fixed it by changing my server's Referrer-Policy policy from same-origin to origin. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

Basicly external website expects request with "Origin" header, and this policy controls if browser will make that request from your domain.

So the issue is https://www.facebook.com/x/oauth/status expects the Origin & Referrer headers in your request.

[ksjunglecorp]

You can use this MS Edge plugin t quickly disable Cors.

CORS Unblock - Microsoft Edge Addons

It will work just fine :)

[Sujay99999]

@dipunj Yes, indeed that was the main problem behind it. But the problem becomes even worse.

Now, if have the Google OAuth credential (i.e I am currently using the google Oauth for authentication purposes), changed such that it allows the origin of the frontend server (i.e. localhost:4000). Even then, I am getting blocked, as the Node (i.e Backend server) makes a redirect 302 request to the Google server, reducing the origin to null, because of the security compliance of the chrome browser to restrict the browser to leak sensitive information, because of the jump from one server to other to other. As soon as the request has its origin changed to null, the google server rejects it, citing the "Wrong" origin of the request.

I am attaching a StackOverflow article, which explains in a better manner

Is there any way to work around this. Any kind of suggestions is welcome.

[linehammer]

You have to understand that the CORS behavior is not an error — it’s a mechanism that’s working as expected in order to protect your users, you, or the site you’re calling. 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. In this case you need to enable your service for CORS which is cross origin resource sharing.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

[bil0ak]

@dipunj Yes, indeed that was the main problem behind it. But the problem becomes even worse.

Now, if have the Google OAuth credential (i.e I am currently using the google Oauth for authentication purposes), changed such that it allows the origin of the frontend server (i.e. localhost:4000). Even then, I am getting blocked, as the Node (i.e Backend server) makes a redirect 302 request to the Google server, reducing the origin to null, because of the security compliance of the chrome browser to restrict the browser to leak sensitive information, because of the jump from one server to other to other. As soon as the request has its origin changed to null, the google server rejects it, citing the "Wrong" origin of the request.

I am attaching a StackOverflow article, which explains in a better manner

Is there any way to work around this. Any kind of suggestions is welcome.

I'm having the exact same issue. Have you found a solution or a way around it?

[naxo8628]

I have the similiar problem when i request a topic to mercure from a Vue Project. I use chart helm provided with "anonymous publish_origins cors_origins write_timeout 0 ui" as extraDirectives, in other scenarios (postman, php, script node, python...) i have no problems, but in Vue Project i get the error:

Access to resource at **'..../.well-known/mercure?topic=....'** from origin 'https://mydomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If i check the response's header in Postman, the Access-Control-Allow-Origin is not present, any ideas?