Access-Control-Allow-Origin不允许使用Origin <origin>

Question

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

我阅读了有关跨域ajax请求的信息,并了解了基础安全问题.就我而言,2台服务器在本地运行,并且喜欢在测试期间启用跨域请求.

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

我正在localhost:8080 - GAE server从节点服务器加载我的页面时发出一个ajax请求.什么是最简单,最安全的(不想用disable-web-security选项启动chrome ).如果我必须改变'Content-Type',我应该在节点服务器上做吗？怎么样？

Answer 1

由于它们在不同的端口上运行,因此它们是不同的JavaScript origin.它们在同一台机器/主机名上并不重要.

您需要在服务器上启用CORS(localhost:8080).看看这个网站:http://enable-cors.org/

您需要做的就是向服务器添加HTTP标头:

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

或者,为简单起见:

Access-Control-Allow-Origin: *

Answer 2

如果您需要在Chrome中快速解决ajax请求,此Chrome插件会自动允许您通过添加正确的响应标头来访问任何来源的任何网站

Chrome Extension Allow-Control-Allow-Origin:*

Answer 3

您必须启用CORS才能解决此问题

如果您的应用程序是使用简单的node.js创建的

在你的响应标题中设置它

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

如果您的应用程序是使用快速框架创建的

使用像CORS这样的中间件

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

并通过申请

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

这是两个参考链接

1. 如何对允许-CORS-在-EXPRESS-的NodeJS
2. diving-into-node-js-very-first-app #see Ajax部分

Answer 4

在 router.js 中，只需在调用 get/post 方法之前添加代码。它对我有用，没有错误。

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

Answer 5

我接受@Rocket hazmat的回答,因为它引导我找到解决方案.确实在GAE服务器上我需要设置标题.我不得不设置这些

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

设置只"Access-Control-Allow-Origin" 给出了错误

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

此外,如果需要发送身份验证令牌,也请添加此令牌

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

此外,在客户端,设置 withCredentials

这导致2个请求发送到服务器,一个用于OPTIONS.Auth cookie不与它一起发送,因此需要处理外部auth.

Answer 6

如果您使用的是 express，则可以使用 cors 中间件，如下所示：

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

app.use(cors())

Answer 7

在 chrome 中使用 ajax 调用跨源资源时遇到问题。

我已经使用 node js 和本地 http 服务器来部署我的 node js 应用程序。

我在访问跨源资源时收到错误响应

我找到了一个解决方案，

1）我已将以下代码添加到我的 app.js 文件中

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

2) 在我的 html 页面中使用 $.getJSON();

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