CORS 中间件适用于 app.get 但不适用于 app.post

Question

使用以下代码时：

服务器：

const cors = require('cors')
const mongoose = require('mongoose');
const Pet = mongoose.model('pets');

const corsOptions = {
origin: 'http://localhost:3000'}

app.get(`/api/pets`, cors(corsOptions), async (req, res) => {
    let pets = await Pet.find();
    return res.status(200).send(pets);
});

app.post(`/api/pets`, cors(corsOptions), async (req, res) => {
    let pet = await Pet.create(req.body);
    return res.status(201).send({
        error: false,
        pet
    })
})

客户：

import axios from 'axios';

export default {
    getAll: async () => {
        let res = await axios.get(`http://localhost:5000/api/pets`);
        return res.data || [];
    },
    post: async (name, birthdate, decription) => {
    let res = await axios.post(`http://localhost:5000/api/pets`, {
        name: name,
        birthdate: birthdate,
        description: decription
    });
        return res;
    },
    ...
}

客户端可以正常访问 .get 路由，但是当它尝试 .post 时出现以下错误：

“从源“http://localhost:3000”访问“http://localhost:5000/api/test”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查: 请求的资源上不存在“Access-Control-Allow-Origin”标头。”

Picture of headers

但是，这将允许 .post 路由正常工作：

服务器：

const cors = require('cors')
...

const corsOptions = {
origin: 'http://localhost:3000'}

app.use(cors(corsOptions));

app.get(`/api/pets`, async (req, res) => {
    ...
});

app.post(`/api/pets`, async (req, res) => {
    ...
})

这两种方法有什么区别，为什么使用“app.use(...)”允许 .post 路由工作，而另一个不能工作？

Answer 1

您必须在允许的http methods 中明确允许方法发布。

所以你的 cors 选项应该是这样的：

const corsOptions = {
  "origin": "http://localhost:3000",
  "methods": "GET,POST", //here explicitly allowing http post method
  "preflightContinue": false,
  "optionsSuccessStatus": 204}

这里是cors lib 的文档，您可以查看更多选项。

Answer 2

所有现代浏览器都会发送飞行前请求（在发送 post 或 get 请求之前发送的请求）以实施同源策略。服务器应该回复可以访问已发送响应的域。 在第一种情况下，您没有在响应中发送任何飞行前响应。 当你使用app.use(cors(corsOptions));时，你的express服务器会在pre-flight request中添加"origin": "*"，这意味着所有域都可以访问服务器发送的响应。 至于为什么 get 有效而 post 无效：任何请求（包括任何 GET 请求）包含一个不在上面列出的 CORS 安全列表请求标头中的标头，都将触发预检。 这意味着您的 get 请求标头可能是 CORS 安全列表中的请求标头。

更多信息可以在这里找到：Preflight request is sent with all methods

这里：https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

我正在添加其他信息来解释为什么第一种情况不起作用而第二种情况起作用：

首先让我说一下，何时发送 CORS 请求。 CORS 请求（或预检请求）仅在请求不是“简单请求”时发送，您可以看到简单请求是什么here。

现在，每当浏览器遇到一个不是简单请求的请求时，它会在发送实际请求（get/post 或任何其他方法）之前发送一个预检请求（HTTP 方法：选项）。在第一种情况下，get 可以正常工作，因为它属于“简单请求”类别。但是 post 不起作用，因为浏览器会在发送实际的 POST 请求之前发送一个 OPTIONS 预检请求（因为 POST 不是一个简单的请求 - 请参阅上面的链接了解原因）。由于在第一种情况下您只为 post 和 get 实现了 cors，因此服务器不处理 OPTIONS 请求，因此浏览器不会发送 POST 请求。

在第二种情况下，您使用了 app.use()，它将在服务器接收到的任何请求中包含 CORS 标头，因此您的预检 OPTION 请求由 app.use() 处理，它允许 localhost:3000 作为产地。