跨域请求被阻止：同源策略不允许在 `localhost:...` 读取远程资源 - ExpressJS 和 npm Cors答案

【问题标题】：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at `localhost:...` - ExpressJS and npm Cors跨域请求被阻止：同源策略不允许在 `localhost:...` 读取远程资源 - ExpressJS 和 npm Cors
【发布时间】：2021-11-02 22:10:22
【问题描述】：

我收到错误 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:... 使用下面的示例代码，我该如何解决？文档和 stackoverflow 中的指南，但没有人在工作。

我正在使用来自 npm 的 cors 模块。

// Init express application
const app = express();

// Setup cors for cross domain requests
const whitelist = [
  "http://localhost:3002/", // frontend curr localhost port
  "http://localhost:5500/", // live server url
];
// eslint-disable-next-line
const corsOptions = {
  origin: function (origin, callback) {
    // allow if the origin is undefined,
    // means has the same origin, the result
    // is undefined because the request
    // is coming from the same origin.
    if (!origin) return callback(null, true);

    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error("CORS not allowed"));
    }
  },
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  methods: ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
  allowedHeaders: [
    "Content-Type",
    "Authorization",
    "X-Requested-With",
    "device-remember-token",
    "Access-Control-Allow-Origin",
    "Origin",
    "Accept",
  ],
};

app.options("*", cors(corsOptions));
app.use(cors(corsOptions));
// END SECURITY CONFIG

// Route for monolithic app
const web = require("./routes/web");
// Route for microservices app
const api = require("./routes/api");
// Route for unit testing
const test = require("./routes/test");

【问题讨论】：

你总是可以作弊并使用 CORS npm 包：npmjs.com/package/cors
OP 正在使用cors npm 包。配置和支持 CORS 不是问题；是 Web 浏览器的安全模型不允许对 localhost 资源的 CORS 请求。

标签： javascript express cors

【解决方案1】：

您无法在代码中解决此问题。这是您的网络架构的配置问题，您的网络浏览器正在实施适当的安全措施。

很长一段时间以来，网络浏览器默认不允许本地主机的 CORS。

不正确的解决方法是在您的网络浏览器中禁用 CORS 检查。对于 Chrome，它将--disable-web-security 添加到程序可执行文件中，即创建一个 chrome 快捷方式 (Windows) 到 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security。

解决此问题的正确方法是不要让您在 web 浏览器上运行的客户端代码使用 localhost 连接到您的 api 服务器，而是正确配置您的环境以通过主机名公开服务器。

根据您运行服务器和客户端的方式，有多种方法可以做到这一点，但如果您只是在同一台机器上运行客户端和服务器以进行开发和调试，您应该只需要添加一个条目到您的 hosts 文件，该文件将除 localhost 之外的主机名解析为 127.0.0.1。

然后将您的代码更新到白名单 test.mydomain.com

127.0.0.1 localhost
127.0.0.1 test.mydomain.com

【讨论】：