快递 CORS 地狱

Question

我在使用一个非常简单的应用时遇到了 CORS 问题，我花了大约 10 分钟来编写它，并且我花了几个小时试图修复这个 CORS 错误。

用 React 编写的前端使用 axios 向 Express 后端发出 POST 请求。

app.use(cors()) 在我的 Express 应用中的单个路由之前调用。

这是我的 React 应用程序中的 axios 请求：

(await axios.post("http://localhost:3000/login", {username: username, password: password})).data.success

我收到了这个 CORS 错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...

OPTIONS 请求的标头

POST 请求的标头

不过，localhost 上一切正常。

快递代码：

require('dotenv').config();
const createError       = require('http-errors');
const express           = require('express');
const cors              = require('cors');
const compression       = require('compression');
const app               = express();

app.use(cors({origin: "*", allowedHeaders: ['Content-Type']}));
app.use(express.json());
app.use(compression());
app.use(express.urlencoded({extended: true}));
app.post("/login", (req, res) => {
    const params = req.body;
    if (params.username === process.env.USERNAME && params.password === process.env.PASSWORD)
        return res.json({success: true});
    else
        return res.status(401).json({success: false});
});

app.use((req, res, next) => next(createError(404)));
app.listen(process.env.NODE_PORT, () => console.log("Listening on port " + process.env.NODE_PORT));

当前的、不理想的可行解决方案：

使用机器的 IP 而不是localhost。

(await axios.post("http://192.168.*.*:3000/login", {username: username, password: password})).data.success 

Answer 1

问题

从the Axios source code 可以看出，当post 的第二个参数是一个对象时（这里就是这种情况），Axios 将请求的Content-Type 标头设置为application/json。

This header value is such as to cause the browser to trigger CORS preflight。然后，服务器必须在预检请求响应的Access-Control-Allow-Headers 标头中显式列出Content-Type；否则，CORS 预检将失败，导致浏览器出现 CORS 错误。

请注意，Express CORS 中间件（您当前所依赖的）的 default configuration 不允许任何标头。

解决方案

在您的 CORS 配置中明确允许 Content-Type。您可以使用CORS middleware's configuration object 的allowedHeaders 属性来做到这一点。

Answer 2

您需要配置您的 cors 选项。源可以是一个字符串或数组，它是允许发出请求的源的白名单。如果你需要它是动态的，你甚至可以用一个函数来处理它。您还可以允许或禁止方法、验证凭据等。检查package readme

Cors 是一种安全机制，用于阻止不同域之间的任何尝试。例如，您的后端位于以下域中：https://wordpress.com 并且您想从您的域中获取您的前端 https://example.com 这可以防止任何人都可以访问您的端点以窃取信息，但这不应该是您唯一的安全机制

const corsOptions = {
    origin: "http://localhost:3000",
    methods: ["GET","POST"]
};

app.use(cors(corsOptions));

Answer 3

使用机器IP代替localhost。

await axios.post("http://192.168.*.*:3000/login", {username: username, password: password})).data.success`