Node.js 使用nginx和aws启用cors的正确配置是什么?
我正在将我的应用程序迁移到一个AWS EC2实例,它以前托管在Hostgator中,运行良好,现在我已经成功地迁移了它,我遇到了一些CORS错误问题 我的应用程序是前端的angular 6应用程序,我用nginx部署了它。后端托管在heroku及其NodeJs 8.0 Restful API中 经过数小时的研究,我发现我必须更改我的应用程序的服务文件 起初是这样的,除了CORS错误,它工作得很好Node.js 使用nginx和aws启用cors的正确配置是什么?,node.js,angular,amazon-web-services,nginx,cors,Node.js,Angular,Amazon Web Services,Nginx,Cors,我正在将我的应用程序迁移到一个AWS EC2实例,它以前托管在Hostgator中,运行良好,现在我已经成功地迁移了它,我遇到了一些CORS错误问题 我的应用程序是前端的angular 6应用程序,我用nginx部署了它。后端托管在heroku及其NodeJs 8.0 Restful API中 经过数小时的研究,我发现我必须更改我的应用程序的服务文件 起初是这样的,除了CORS错误,它工作得很好 server { listen 80; listen [::]:80;
server {
listen 80;
listen [::]:80;
server_name http://your-site-name.com;
root /var/www/app-name;
server_tokens off;
index index.html index.htm;
location / {
# First attempt to server request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html =404;
}
}
然后我尝试了一个我在周围找到的解决方案
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
这不起作用,在重新加载我的页面后,我得到了一个404NotFoundnginx错误。下一个解决方案也是这样做的:
location / {
# Simple requests
if ($request_method ~* "(GET|POST)") {
add_header "Access-Control-Allow-Origin" *;
}
# Preflighted requests
if ($request_method = OPTIONS ) {
add_header "Access-Control-Allow-Origin" *;
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
return 200;
}
....
# Handle request
....
}
最后我尝试了这个:
location / {
dav_methods PUT DELETE MKCOL COPY MOVE;
# Preflighted requestis
if ($request_method = OPTIONS) {
add_header "Access-Control-Allow-Origin" *;
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD, DELETE";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
return 200;
}
# CORS WHITELIST EVERYTHING
# This is allowing everything because I am running
# locally so there should be no security issues.
if ($request_method = (GET|POST|OPTIONS|HEAD|DELETE)) {
add_header "Access-Control-Allow-Origin" *;
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
}
try_files $uri $uri/ /index.html$is_args$args;
}
最后一个解决方案运行良好(这意味着,我的应用程序正在加载,没有出现404错误),但它仍然给了我CORS错误
server {
listen 80;
listen [::]:80;
server_name http://your-site-name.com;
root /var/www/app-name;
server_tokens off;
index index.html index.htm;
location / {
# First attempt to server request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html =404;
}
}
是的,我确实在后端启用了CORS,这是我的server.js文件:
require('./config/config.js');
//Requires
const express = require('express')
const colors = require('colors')
const bodyParser = require('body-parser')
const app = express();
//Enable cors
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, token");
res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
next();
});
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(require("./routes/index"));
//serve
app.listen(process.env.PORT, () => {
console.log(`Listening ${process.env.PORT}. Status:`, 'online'.green)
});
这就是我在浏览器控制台中遇到的错误
Access to XMLHttpRequest at
'https://backend.herokuapp.com/inventory/most_sold' from origin
'http://front-end-ip' has been blocked by CORS policy: No 'Access-Control-
Allow-Origin' header is present on the requested resource.
我希望你们中的一些人能给我一些指导
提前感谢您可以使用CORS(一个node.js包,用于提供Connect/Express中间件,可用于启用具有各种选项的CORS),即
- 通过
npm i CORS在node.js中安装CORS
const cors=require(“cors”)代码>
- 然后设置CORS选项
const corsoption={ 来源:对, 方法:“获取、头部、放置、修补、发布、删除”, 证书:正确, ExposedHeader:[“x-auth-token”] };代码>
app.use(cors(corsoption))代码>
文档:-我在nginx.conf上使用了更多的\u set\u头,而不是add\u头,取得了更大的成功:
more_set_headers 'Access-Control-Allow-Origin:http://www.mydomain.test';
more_set_headers 'Access-Control-Allow-Methods: POST';
在FF和Chromium上,即使没有Access Control Allow Methods标头,也可以这样做
more_set_headers指令是模块的一部分,包含在nginx的中,您可以使用以下方法将其安装在ubuntu 16上:
sudo apt get安装nginx extras
感谢您的回复,不幸的是,此解决方案不起作用。正如我告诉过你的,后端在Hostgator上运行得很好,没有cors错误。这就是为什么我认为它与nginx服务器文件有关。错误仍然是一样的,顺便问一下,您是否在server.js文件中进行了更改并将后端重新托管到heroku?!是的,我做了两次,以防万一