本地主机上带有 Angular 的 NodeJS + Express：被 CORS 预检阻止

Posted 2023-02-22

【中文标题】本地主机上带有 Angular 的 NodeJS + Express：被 CORS 预检阻止

【英文标题】：NodeJS + Express with Angular on Localhost: Blocked by CORS preflight

【发布时间】：2019-10-30 07:51:24

【问题描述】：

我已经用尽了尝试这些帖子中给出的所有解决方案：

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource

How to enable cors nodejs with express?

我尝试过使用 cors，这似乎是流行的解决方案，但我仍然收到以下错误：

Access to XMLHttpRequest at 'http://localhost:3000/email' from origin 'http://localhost:63342' has been blocked by CORS policy: Method GET' is not allowed by Access-Control-Allow-Methods in preflight response.

这是我的服务器端 (NodeJS) 设置： 尝试 #1（没有 cors 模块）

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var cors = require('cors')
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

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')));

function setupCORS(req, res, next) 
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-type,Accept,X-Access-Token,X-Key');
  res.header('Access-Control-Allow-Origin', '*');
  if (req.method === 'OPTIONS') 
    res.status(200).end();
   else 
    next();
  

app.all('/*', setupCORS);


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

尝试 #2：（使用“cors”模块）

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var cors = require('cors')
var app = express();
app.use(cors());


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

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

这些都不起作用，我不知道如何解决这个问题。 我正在运行服务器 localhost，这就是我在 Angular 中进行 GET 调用的方式：

$scope.getAllCustomerEmails = function() 
        $scope.textBox= "getAllCustomerEmails";

        $http(
            method: "GET'",
            url: "http://localhost:3000/email"
        ).then(function successCallback(response) 
            //console.log("/email response: ", response);
            $scope.textBox = response;

        , function errorCallback(response) 
            $scope.textBox = "GET Error";
        );
    ;

非常感谢任何帮助。

【问题讨论】：

尝试在您的app.use(cors()) 行之后添加app.options('*', cors())（或者甚至可以代替该行）。这将导致 npm cors 模块也处理 OPTIONS 请求。否则，我认为您现有的代码不会导致预检 OPTIONS 请求得到处理。 （不反对我。）

谢谢@sideshowbarker。试过了，但仍然是同样的问题。

【参考方案1】：

我想这会对你有所帮助...

在与 package.json 文件平行的应用程序的根目录下，创建一个新文件 proxy.config.json

   "/api*": 
     "target":"http://localhost:8080", //Add Your Backend url here
     "secure":false,
     "logLevel":"debug"
   

现在在您的 package.json 文件中，在脚本中将此添加到启动方法。

"scripts": 
    "start":"ng serve --proxy-config proxy.config.json",
    "test":"ng test"

【讨论】：

感谢您的回答。但是，根据您的建议，我仍然有问题。我使用 Angular 9 和 Express.js Access to XMLHttpRequest at 'localhost:7777/api/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.