Question

我面临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",

Answer 1

好吧，通过添加下面的部分来设法完成这项工作

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中的controllers文件夹下。 index.js包含所有其他控制器的初始化。...请参见下文

(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）不允许同一主机（即本地主机）上2个本地主机之间的HTTP REQ \ RESP通讯。来自本地主机的响应中的威胁在哪里？除非我误解了CORS

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

1 个答案: