时间戳

首页 > 解决方案 > 来自来源的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

node.js - 来自来源的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

问题描述

我面临 REST API 的问题。我的前端在 React 中，API 在 Express 中。我间歇性地低于错误。我浏览了许多其他类似的帖子，并尝试将 HTTP 标头添加到响应中，但没有任何运气。这些调用在 Postman 客户端上运行良好。

“来自原点 'http://localhost:3000' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”

所以，到目前为止，我已经添加了以下几行来填充 HTTP 响应。最烦人的部分是这些错误只发生在某些 Web 服务而不是其他 Web 服务中。它们都是相同的编码，因此很难确定为什么在某些情况下它会失败。

我的server.js（Express REST 应用程序）如下...

 const express = require('express');


const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const controllers = require('./controllers');

const logger = require('./logger/logger');
const port = 9000;

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json());
app.use(bodyParser.raw());
controllers.init(app);
app.use(cors());


//Listen server on define port
var server = app.listen(port, () => {
  
    logger.info("API Server is running on port " + port);
})

因此，到目前为止，我注意到的是，当我在控制器中添加以下部分以包含 HTTP 响应标头时（控制器使用服务和模型来服务请求），即使我在从我的 React 首次成功调用后删除它们，错误也会消失前端，这真的很奇怪。我使用 Chrome 来测试我的 React 前端。这是否意味着 Chrome 浏览器正在缓存一些东西。当谈到起源？我担心这将如何在生产中跨越？有没有人经历过这种行为？

app.use((req, res, next) => {
        res.append('Access-Control-Allow-Origin', "*");
        res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
        res.append('Access-Control-Allow-Headers', 'Content-Type');
        next();
    });

以下是我用于 Express API 服务器的包。我的 React 前端使用“react”：“^16.13.1”

"dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",

标签： node.jsreactjsexpresscors

解决方案

好的，只是通过添加以下部分来完成这项工作

controllers.init = function (app) {
            app.use((req, res, next) => {
                res.append('Access-Control-Allow-Origin', '*');
                res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
                res.append('Access-Control-Allow-Headers', 'Content-Type');
                next();
            });

在我的控制器文件夹下的 index.js 中。index.js 包含所有其他控制器的 init ......见下文

(function (controllers) {
    var appMenuController = require("./appMenuController");
    var applicantTypeController = require("./applicantTypeController");
    var permitApplicationController = require("./permitApplicationController");
    var campusController = require("./campusController");
    var paymentMethodController = require("./paymentMethodController");
    var permitTypeController = require("./permitTypeController");
    var permitController = require("./permitController");
    var permitChangeRequestController = require("./permitChangeRequestController");
    var requestTypeController = require("./requestTypeController");
    var vehicleController = require("./vehicleController");
    
    controllers.init = function (app) {
        app.use((req, res, next) => {
            res.append('Access-Control-Allow-Origin', '*');
            res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
            res.append('Access-Control-Allow-Headers', 'Content-Type');
            next();
        });
        appMenuController.init(app);
        applicantTypeController.init(app);
        permitApplicationController.init(app);
        campusController.init(app);
        paymentMethodController.init(app);
        permitTypeController.init(app);
        permitController.init(app);
        permitChangeRequestController.init(app);
        requestTypeController.init(app);
        vehicleController.init(app)
    }
})(module.exports);

我仍然不明白，即为什么 Chrome（甚至 Firefox）不允许在同一主机（即 localhost）上的 2 个本地主机之间进行 HTTP REQ\RESP 通信。来自本地主机的响应中的威胁在哪里？除非我误解了 CORS

推荐阅读