javascript - Origin <origin> is not allowed by Access-Control-Allow-Origin - Stack Overflow

admin管理员组

文章数量:1129759

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?

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?

• javascript
• node.js
• ajax
• google-chrome
• cors

Share Improve this question Follow edited Feb 16, 2019 at 10:45 sideshowbarker♦ 87.9k2929 gold badges214214 silver badges211211 bronze badges asked Sep 5, 2013 at 17:50 bsrbsr 58.6k8888 gold badges217217 silver badges321321 bronze badges 1

• 1 A faster solution can be found here: stackoverflow.com/a/21622564/4455570 – Gabriel Wamunyu Commented May 30, 2017 at 18:50

Add a comment  | 

20 Answers 20

Sorted by: Reset to default 288

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

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

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

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

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.

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

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

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

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>

If anyone is using Node JS and express and is searching for the solution, here are the quick steps for you:

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

1. install cors using npm npm install cors --save

2. import it as: const cors = require('cors')

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

For more details insatll and usage of cors .

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

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.

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");

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

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>

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               

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

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:

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.

To solve this error : just install cors.

1. npm i cors and use like this:
2. const cors = require('cors');
3. app.use(cors());

本文标签： javascriptOrigin ltorigingt is not allowed by AccessControlAllowOriginStack Overflow