Origin is not allowed by Access-Control-Allow-Origin

Question

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

I read about cross domain ajax requests, and understand the underlying security issue. In my case, 2 servers are running locally, and like to enable cross domain requests during testing.

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

I am issuing an ajax request to localhost:8080 - GAE server while my page is loaded from node server. What is the easiest, and safest ( Don't want to start chrome with disable-web-security option). If I have to change 'Content-Type', should I do it at node server? How?

A faster solution can be found here: https://stackoverflow.com/a/21622564/4455570 — Gabriel Wamunyu, May 30 '17 at 18:50

score 279 · Accepted Answer · edited Jan 31 '20 at 15:43

279

Since they are running on different ports, they are different JavaScript origin. It doesn't matter that they are on the same machine/hostname.

You need to enable CORS on the server (localhost:8080). Check out this site: http://enable-cors.org/

All you need to do is add an HTTP header to the server:

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

Or, for simplicity:

Access-Control-Allow-Origin: *

Thought don't use "*" if your server is trying to set cookie and you use withCredentials = true

when responding to a credentialed request, server must specify a domain, and cannot use wild carding.

You can read more about withCredentials here

edited Jan 31 '20 at 15:43

Arseniy-II

8,323
5
24
49

answered Sep 05 '13 at 17:59

gen_Eric

223,194
41
299
337

if we want to add this header into an HTML then what should we do for it? – Azam Alvi Oct 30 '13 at 16:42
1

I didn't think that port was necessary but if you're using a non-standard port such as 3000 you have to include it in the CORS policy. – Michael Connor Jun 26 '15 at 21:41
Note that from testing we just did at my office, all parts of that header are required: `localhost` isn't enough on its own, and as Michael pointed out, port is required if you're not using a standard port. – Dave DuPlantis Jun 02 '17 at 18:55
4

Thanks for this response. Just wanna highlight the security implications of using '*' as the value here. This allows all origins: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin Seems like the first example would be best in terms of least access. Details about how to do this with multiple domains here: https://stackoverflow.com/a/1850482/1566623 – Christopher Kuttruff May 19 '18 at 07:37
33

For clarity's sake, when it is said that you need to "add an HTTP header to the server", this means that the given `Access-Control-Allow-Origin` header needs to be an added header to HTTP responses that the server sends. This header needs to be part of the **server's response, it does not need to be part of the client's request**. Specifically what happens is before the client makes the actual request you want, the browser sends an `OPTIONS` request before it, and if the server's response to that `OPTIONS` request does not contain the header, the browser will not send your desired request. – Ozymandias Nov 19 '18 at 05:34
2

It is important to read the relevant tips for your backend servers at enable-cors.org. – Karlth Jan 03 '19 at 14:12
Are there any risks in allowing anyone access using `Access-Control-Allow-Origin: *`? – Percy Apr 09 '19 at 13:40
1

@Percy: that depends, is your data sensitive? Setting a wildcard value is effectively turning CORS protections off completely for the resource in question. Understanding the motivations behind having CORS in the first place is important, but far too deep a topic for a single SO comment. – Coderer Aug 13 '19 at 09:52

Billy Baker · Answer 2 · 2020-02-11T19:59:47.487

84

If you need a quick work around in Chrome for ajax requests, this chrome plugin automatically allows you to access any site from any source by adding the proper response header

Chrome Extension Allow-Control-Allow-Origin: *

edited Feb 11 '20 at 19:59

answered Jun 15 '16 at 15:54

Billy Baker

890
6
9

7

I don't know why you're not getting more upvotes. This is the least intrusive for development on localhost with Chrome. – David Betz Oct 22 '16 at 14:52
definitely agree. Easy to enable for localhost dev against a remote server without having to change the config for the remote server. – Jens Wegar May 16 '17 at 11:08
1

@DavidBetz: considering you verify the extension and trust it, of course ;) – haylem Jun 14 '17 at 13:45
2

THIS SHOULD BE THE TOP ANSWER! Especially where localhost is concerned. – Mr. Benedict Aug 24 '17 at 11:29
This has to be the top answer ! It worked with a single click. If you're developing some app on Localhost, USE THIS! – Pirate X May 29 '18 at 14:21
33

If this was a good solution, CORS would not have been invented in the first place. Applying this header to any host disable the CORS protection and exposes you to malicious scripts, not just yours. Don't be surprised if your bank account is suddenly empty. – dolmen Sep 21 '18 at 12:41
This extension is not available on chrome store – Ashish Kirodian Feb 11 '20 at 08:50
Thanks Ashish, looks like the old plugin was removed. I updated the link. This new plugin gives you more CORS control – Billy Baker Feb 11 '20 at 20:01
@dolmen You just reminded us of the possible threat. Disabled the CORS extension and removed it too. Never gonna try it again, unless I'm on a virtual machine or an offline environment. – Vibhor Dube Jun 20 '20 at 14:04

score 67 · Answer 3 · edited Jun 20 '20 at 09:12

67

You have to enable CORS to solve this

if your app is created with simple node.js

set it in your response headers like

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

if your app is created with express framework

use a CORS middleware like

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

and apply via

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});

Here are two reference links

how-to-allow-cors-in-express-nodejs
diving-into-node-js-very-first-app #see the Ajax section

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 05 '13 at 18:08

Mithun Satheesh

27,240
14
77
101

can you please specify, how to use `config.allowedDomains` . say in my case what uri should I put there? – bsr Sep 05 '13 at 18:15
@bsr : you can use `*` or the `specific domain` you want to give access to. – Mithun Satheesh Sep 05 '13 at 18:19
2

so am I the only one getting `app.configure()` is not a function error? – Pramesh Bajracharya Nov 22 '17 at 09:40
2

@PrameshBajrachaya I didn't include the "app.configure" part -- only "app.use(allowCrossDomain)", and it worked for me. – Giorgos Sfikas Mar 24 '18 at 18:55

score 11 · Answer 4 · edited Jul 19 '19 at 15:16

11

In router.js just add code before calling get/post methods. It works for me without errors.

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

router.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

edited Jul 19 '19 at 15:16

JJJ

32,902
20
89
102

answered Oct 02 '18 at 04:13

Brahmmeswara Rao Palepu

189
1
5

Saved a lot of my time. I knew how to fix the CORS issue earlier, but it does not worth remembering it. This solution works without any change. Thanks – Aman Jain May 22 '23 at 14:24
Update: this does not allow DELETE call yet. – Aman Jain May 22 '23 at 15:57

bsr · Answer 5 · 2013-09-06T00:55:16.997

I accept @Rocket hazmat's answer as it lead me to the solution. It was indeed on the GAE server I needed to set the header. I had to set these

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

setting only "Access-Control-Allow-Origin" gave error

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Also, if auth token needs to be sent, add this too

"Access-Control-Allow-Credentials" -> "true"

Also, at client, set withCredentials

this causes 2 requests to sent to the server, one with OPTIONS. Auth cookie is not send with it, hence need to treat outside auth.

score 8 · Answer 6 · answered Feb 16 '19 at 09:50

8

If you are using express, you can use cors middleware as follows:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

answered Feb 16 '19 at 09:50

Akalanka Weerasooriya

504
5
10

You can and you should. Here are more options and documentation: https://expressjs.com/en/resources/middleware/cors.html – Ingo Steinke Apr 16 '21 at 18:30

score 5 · Answer 7 · edited Oct 18 '14 at 17:17

I was facing a problem while calling cross origin resource using ajax from chrome.

I have used node js and local http server to deploy my node js app.

I was getting error response, when I access cross origin resource

I found one solution on that ,

1) I have added below code to my app.js file

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

2) In my html page called cross origin resource using $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

score 4 · Answer 8 · answered Apr 17 '18 at 19:47

4

Add this to your NodeJS Server below imports:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

answered Apr 17 '18 at 19:47

Ryan Cocuzzo

3,109
7
35
64

score 3 · Answer 9 · answered Sep 29 '18 at 11:43

If you got 403 after that please reduce filters in WEB.XML tomcat config to the following:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

score 3 · Answer 10 · answered Jun 09 '20 at 10:15

In case anyone searching for the solution , if you are using express here is the quick solution .

const express = require('express')
const cors = require('cors')
const app = express()

1) install cors using npm npm install cors --save

2) import it [require ] const cors = require('cors')

3) use it as middleware app.use(cors())

for details insatll and usage of cors . That is it, hopefully it works.

score 2 · Answer 11 · answered May 02 '18 at 09:10

I finally got the answer for apache Tomcat8

You have to edit the tomcat web.xml file.

probabily it will be inside webapps folder,

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

find it and edit it

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

This will allow Access-Control-Allow-Origin all hosts. If you need to change it from all hosts to only your host you can edit the

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

above code from * to your http://your_public_IP or http://www.example.com

you can refer here Tomcat filter documentation

Thanks

score 2 · Answer 12 · answered Apr 24 '20 at 19:02

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

add this to your routes which you are calling from front-end. Ex- if you call for http://localhost:3000/users/register you must add this code fragment on your back-end .js file which this route lays.

score 1 · Answer 13 · answered Aug 11 '19 at 06:31

1

For PHP, use this to set headers.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

answered Aug 11 '19 at 06:31

Hamza Waleed

1,334
10
12

score 1 · Answer 14 · answered Sep 22 '19 at 14:50

Hi This is the way to solve CORS problem in node Just add these lines on server "api" side in Node.js(or what ever your server File), befor that make sure to install "cors"

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

aakash4dev · Answer 15 · 2022-07-13T08:03:48.160

If your server is server=express() just add server.use(cors()) to next line. For Example:

server.js

const express = require('express')
const cors = require('cors')
server=express()
server.use(cors())

server.get('/',(req,res)=>{
    res.send({"name":"aakash","name2":"aakash4dev"})
})
server.listen(3000)

index.html

<script>
    fetch('http://localhost:3000/')
  .then(res=> res.json())
  .then(data => console.log(data))
</script>

score 0 · Answer 16 · answered Sep 28 '18 at 19:18

use dataType: 'jsonp', works for me.

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function

Nimasha Madhushani · Answer 17 · 2022-04-03T08:06:32.997

0

If you are using express,

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

If you are using app.use(express.json()); code line in your server file to parse incoming requests with JSON payloads and is based on body-parser, keep in mind to use it after using app.use(cors()) code line. Otherwise, security issues may occur. CORS

edited Apr 03 '22 at 08:06

answered Apr 03 '22 at 08:00

Nimasha Madhushani

190
3
17

score 0 · Answer 18 · answered Feb 07 '23 at 13:22

I had this issue, and I followed all the recommended snippets both for php side (setting the headers) and on react (axios withCredenitial=true), and I couldn't get rid of the error.

In php I had:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Finally I noticed that these headers do not appear in the response.

The response should look like this:

Apparently, my vscode started saving the file as UTF8-BOM for some reason. As a result, headers were sent immediately, and all subsequent header(..) statement were ignored because headers were already sent.

Two useful php commands to check this issue: headers_list() and headers_sent()

Notepad++ is good to view file encoding, and switching to a different encoding:

score 0 · Answer 19 · answered May 22 '23 at 16:08

While I found Brahmmeswara Rao Palepu's answer works great, it does not work for all HTTP Verbs by default.

I was getting the below error:

Access to XMLHttpRequest at 'http://localhost:3000/users/user/159' from origin 'http://localhost:4200' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

To allow DELETE Verb too, I had to explicitly add another header Access-Control-Allow-Methods in the express's router(routes/index.js)file.

router.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
  next();
});

Hope this will be helpful to someone who do not want to learn much about CORS and directly bypass the error for local development.

Origin is not allowed by Access-Control-Allow-Origin

19 Answers19

if your app is created with simple node.js

if your app is created with express framework

Linked

Related