Origin <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?

Solution 1

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

Solution 2

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: *

Solution 3

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

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

Solution 4

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.

Solution 5

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();
  });

View more solutions

Comments

[Gabriel Wamunyu]

A faster solution can be found here: stackoverflow.com/a/21622564/4455570

[bsr]

can you please specify, how to use config.allowedDomains . say in my case what uri should I put there?

[Mithun Satheesh]

@bsr : you can use * or the specific domain you want to give access to.

[Azam Alvi]

if we want to add this header into an HTML then what should we do for it?

[Michael Connor]

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.

[David Betz]

I don't know why you're not getting more upvotes. This is the least intrusive for development on localhost with Chrome.

[Jens Wegar]

definitely agree. Easy to enable for localhost dev against a remote server without having to change the config for the remote server.

[Dave DuPlantis]

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.

[haylem]

@DavidBetz: considering you verify the extension and trust it, of course ;)

[Mr. Benedict]

THIS SHOULD BE THE TOP ANSWER! Especially where localhost is concerned.

[Pramesh Bajracharya]

so am I the only one getting app.configure() is not a function error?

[Giorgos Sfikas]

@PrameshBajrachaya I didn't include the "app.configure" part -- only "app.use(allowCrossDomain)", and it worked for me.

[Christopher Kuttruff]

Thanks for this response. Just wanna highlight the security implications of using '*' as the value here. This allows all origins: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… Seems like the first example would be best in terms of least access. Details about how to do this with multiple domains here: stackoverflow.com/a/1850482/1566623

[Pirate X]

This has to be the top answer ! It worked with a single click. If you're developing some app on Localhost, USE THIS!

[dolmen]

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.

[Ozymandias]

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.

[Karlth]

It is important to read the relevant tips for your backend servers at enable-cors.org.

[Percy]

Are there any risks in allowing anyone access using Access-Control-Allow-Origin: *?

[Coderer]

@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.

[Ashish Kirodian]

This extension is not available on chrome store

[Billy Baker]

Thanks Ashish, looks like the old plugin was removed. I updated the link. This new plugin gives you more CORS control

[Vibhor Dube]

@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.

[Ingo Steinke]

You can and you should. Here are more options and documentation: expressjs.com/en/resources/middleware/cors.html