Nginx Cors Angular 9 Rest Api

Posted 2023-03-04

【中文标题】Nginx Cors Angular 9 Rest Api

【英文标题】：Nginx Cors Angular9 RestApi

【发布时间】：2020-09-01 19:53:12

【问题描述】：

我是 Angular 初学者并尝试部署一个 CRUD 应用程序。我找到了这个src，编译成功，上传到我的vps，但是当我在浏览器上查看时出现了Cors错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api. (Reason: CORS request did not succeed).

我安装了 nginx 服务器并设置 /etc/nginx/sites-available/mySite.com：

server
 listen 80;
 listen [::]:80;

 root /var/www/mySite.com/html;
 server_name xxx.xx.xxx.xxx;

 location /
  add_header 'Access-Control-Allow-Origin' '*';
  try_files $uri /index.html;
 

我将站点代码放在 /var/www/mySite/html 中，代理 config 和 /var/www/mySite/api 中的服务器代码，我称之为 cors lib：

        var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var casesRouter = require('./routes/cases');

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/coronavirus',  useNewUrlParser: true, useUnifiedTopology: true );

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() 
  console.log('Connected to MongoDB!');
);

var app = express();

app.use(cors());
app.use(logger('dev'));

app.use(express.json());
app.use(express.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api', casesRouter);

module.exports = app;

..这是 Firefox (68.8.0esr) 网络标签的屏幕截图：

..以及 Chromium 屏幕截图：

Nginx 和 RestApi 中的 Cors 设置无效。 有什么想法吗？

谢谢

ps：我使用 npm (v6.14.4)、node(v13.12.0)、nginx (1.14)

【参考方案1】：

在节点应用中你可以做下一件事情：

app.use((req, res, next) => 
  const requestedHeaders = req.header('Access-Control-Request-Headers');
  const parsedHeaders = [];
  if (typeof requestedHeaders === 'string') 
    parsedHeaders.push(...requestedHeaders.toLowerCase().split(','));
  
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  // res.header('Access-Control-Allow-Origin', '*');
  if (parsedHeaders.length) 
    res.header('Access-Control-Allow-Headers', parsedHeaders.join(', '));
  
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
);

代替或紧随其后

app.use(cors());

【讨论】：

感谢您的建议，但我仍然有相同的 Cors 错误：/

您能否分享来自网络选项卡的失败请求的屏幕截图以及请求和响应标头？

我已经用网络标签和控制台返回更新了我的帖子，谢谢..

抱歉，已更新。我们可以在标题响应中看到“Access-Control-Allow-Origin *”是允许的......另一方面，我必须解决关于 favicon.ico 加载的错误 502......

但是截图上没有Access-Control-Allow-Origin，你在哪里看到的？