没有& # 39;Access-Control-Allow-Origin& # 39;—节点/ Apache端口问题

我已经使用Node/Express创建了一个小API，并试图使用Angularjs拉数据，但由于我的html页面在localhost:8888和节点API在端口3000上监听下运行，我得到了No 'Access-Control-Allow-Origin'。我尝试使用node-http-proxy和Vhosts Apache，但没有太多的成功，请参阅下面的完整错误和代码。

XMLHttpRequest无法加载localhost:3000。被请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问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')

角码

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {


$http.get('localhost:3000').then(function(response) {
var data = response.data;
$scope.contractors = data;
})

超文本标记语言

<body ng-app="contractorsApp">
<div ng-controller="ContractorsCtrl">
<ul>
<li ng-repeat="person in contractors">{{person.name}}</li>
</ul>
</div>
</body>
492979 次浏览
小开

你可以使用"$http.jsonp"

或

下面是周围的工作铬为本地测试

你需要使用以下命令打开你的chrome浏览器。(按窗口+ R)

Chrome.exe --allow-file-access-from-files

注意:你的chrome浏览器不能打开。当你运行这个命令时，chrome浏览器会自动打开。

如果你在命令提示符中输入这个命令，然后选择你的chrome安装目录，然后使用这个命令。

下面是在MAC中使用“——allow-file-access-from-files”打开chrome的脚本代码

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

第二个选项

你可以使用(1)打开来添加标志:open -a '谷歌Chrome'——args——allow-file-access-from-files

小开
最佳答案

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

// Add headers before the routes are defined
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();
});

(你可能需要使用127.0.0.1而不是localhost。)

小开

上面的回答对我来说工作得很好，除了我需要将多个域列入白名单之外。

此外，顶部答案受到这样一个事实的影响:OPTIONS请求不是由中间件处理的，你不能自动得到它。

我在Express配置中将白名单域存储为allowed_origins，并根据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);
});
小开

接受的答案是好的，如果你喜欢更短的东西，你可以使用一个名为cors的插件提供给Express.js。

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

var cors = require('cors');


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

(你可能需要使用127.0.0.1而不是localhost。)

请求源需要与允许的源相匹配，你也可以有多个:

app.use(
cors({origin: ['http://localhost:8888', 'http://127.0.0.1:8888']})
);
小开 
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();
}




});
小开 

/**
* Allow cross origin to access our /public directory from any site.
* Make sure this header option is defined before defining of static path to /public directory
*/
expressApp.use('/public',function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
// Request headers you wish to allow
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// Set to true if you need the website to include cookies in the requests sent
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});




/**
* Server is about set up. Now track for css/js/images request from the
* browser directly. Send static resources from "./public" directory.
*/
expressApp.use('/public', express.static(path.join(__dirname, 'public')));
If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following.

小开

应答码只允许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();
});
小开

另一种方法是简单地添加头到你的路由:

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:)');
});
小开

在NODEJ Restful api的app.js中增加如下代码，以避免在angular 6或其他框架中出现“Access-Control-Allow-Origin”错误

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


var cors = require('cors');
var bodyParser = require('body-parser');


//enables cors
app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type'],
'exposedHeaders': ['sessionId'],
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false
}));
小开

在你的项目中安装cors依赖:

npm i --save cors

添加到您的服务器配置文件如下:

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

它适用于2.8.4 cors版本。

小开

这对我很管用。

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


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

你可以根据自己的需要改变*。希望这能有所帮助。

小开

当前端和后端运行在不同的端口上时，就会发生这种情况。由于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

小开

除了所有列出的答案外，我还犯了同样的错误

我可以访问前端和后端，我已经添加了歌珥模块app.use(cors());仍然，我正在与这个错误作斗争。

经过一些调试后，我发现了这个问题。当我上传一个大小超过1mb的媒体时，Nginx服务器抛出了错误

<html>


<head>
<title>413 Request Entity Too Large</title>
</head>


<body>
<center>
<h1>413 Request Entity Too Large</h1>
</center>
<hr>
<center>nginx/1.18.0</center>
</body>


</html>

但是在前台控制台，我发现了这个错误

Access to XMLHttpRequest at 'https://api.yourbackend.com' from origin 'https://web.yourfromntend.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这让人很困惑。但是这个错误的路由原因来自nginx配置。这只是因为指令client_max_body_size的值在默认情况下被设置为0。它决定了允许的HTTP请求大小是client_max_body_size。这个指令可能已经在位于/etc/nginx/nginx.conf的nginx.conf文件中定义了。现在你需要在http或server中添加/编辑指令client_max_body_size的值。

server {
client_max_body_size 100M;
...
}

一旦你设置了你想要的值，保存你的更改并重新加载Nginx: service nginx reload

经过这些改变，它运行得很好

参考: https://www.keycdn.com/support/413-request-entity-too-large#:~:text=%23,processed%20by%20the%20web%20server.&text=An%20example%20request%2C%20that%20may,e.g.%20a%20large%20media%20file)。

小开

其他的答案对我都不管用。(包括cors包，或通过中间件设置报头)

套接字。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"]
}
});
小开

你可以用cors包来处理。

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


app.use(cors())

用于设置具体的原点

app.use(cors({origin: 'http://localhost:8080'}));

know more

小开

我们将看看前两个答案是否接受我的编辑，但很可能你将不得不添加或使用127.0.0.1而不是localhost。

使用cors包，你甚至可以使用多个允许的来源:

app.use(
cors({ origin: ["http://localhost:8888", "http://127.0.0.1:8888"] })
);

如果你想允许任何东西，你可以使用origin: "*"。

有关更多信息，请查看Web Dev Simplified教程。


提交答案