angular - Nginx Cors Angular9 RestApi

Question

我是一个角度初学者，并尝试部署一个 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 中，代理配置和服务器代码放在 /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)

标签： angularnginxcors

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