否'Access-Control-Allow-Origin' - 节点/ Apache端口问题

Question

我使用Node/Express创建了一个小API并尝试使用Angularjs来提取数据,但是当我的html页面在localhost:8888上运行apache并且节点API在端口3000上侦听时,我得到了No'Access-Control-允许来源.我尝试使用node-http-proxy和Vhosts Apache但没有取得多大成功,请参阅下面的完整错误和代码.

"XMLHttpRequest无法加载localhost:3000.请求的资源上没有'Access-Control-Allow-Origin'标头.因此不允许来自"localhost:8888"."

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

Answer 1

尝试将以下中间件添加到您的NodeJS/Express应用程序中(为方便起见,我添加了一些注释):

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

希望有所帮助!

Answer 2

接受的答案很好,如果你喜欢更短的东西,你可以使用一个名为cors的插件,可用于Express.js

对于这种特殊情况,它使用起来很简单:

var cors = require('cors');

// use it before all route definitions
app.use(cors({origin: 'http://localhost:8888'}));

Answer 3

另一种方法是简单地将标题添加到您的路线:

router.get('/', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed
    res.setHeader('Access-Control-Allow-Credentials', true); // If needed

    res.send('cors problem fixed:)');
});

Answer 4

在顶部的答案对我来说工作得很好,但我需要添加到白名单不止一个域.

此外,最佳答案OPTIONS是因为中间件不处理请求而您没有自动获取请求.

我按照allowed_originsExpress配置存储列入白名单的域,并根据origin标头放置正确的域,因为Access-Control-Allow-Origin不允许指定多个域.

这是我最终得到的:

var _ = require('underscore');

function allowCrossDomain(req, res, next) {
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  var origin = req.headers.origin;
  if (_.contains(app.get('allowed_origins'), origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  if (req.method === 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
}

app.configure(function () {
  app.use(express.logger());
  app.use(express.bodyParser());
  app.use(allowCrossDomain);
});

Answer 5

嗨，当前端和后端在不同的端口上运行时会发生这种情况。由于缺少 CORS 标头，浏览器会阻止来自后端的响应。解决方案是在后端请求中添加 CORS 标头。最简单的方法是使用 cors npm 包。

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

这将在您的所有请求中启用 CORS 标头。有关更多信息，您可以参考 cors 文档

https://www.npmjs.com/package/cors

Answer 6

答案代码仅允许localhost:8888.此代码无法部署到生产环境,或者不同的服务器和端口名称.

要使其适用于所有来源,请使用此代码:

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Answer 7

在项目中安装cors依赖项:

npm i --save cors

将以下内容添加到服务器配置文件中:

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

它适用于我的2.8.4 cors版本.

Answer 8

app.all('*', function(req, res,next) {
    /**
     * Response settings
     * @type {Object}
     */
    var responseSettings = {
        "AccessControlAllowOrigin": req.headers.origin,
        "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name",
        "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",
        "AccessControlAllowCredentials": true
    };

    /**
     * Headers
     */
    res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);
    res.header("Access-Control-Allow-Origin",  responseSettings.AccessControlAllowOrigin);
    res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
    res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }


});

Answer 9

这对我有用。

app.get('/', function (req, res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.send('hello world')
})

您可以更改*以适合您的需求。希望这会有所帮助。

Answer 10

所有其他答案对我都不起作用。（包括 cors 包，或通过中间件设置 headers）

对于 socket.io 3^ 这不需要任何额外的包。

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

const server = require('http').createServer(app);
const io = require('socket.io')(server, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});