Javascript 无法从浏览器向express server发送json

我建立了两台服务器：第一台用于前端（localhost:7200），第二台用于后端（localhost:7300）。相应地，在路由“/test”上，前端到后端发出了一个测试请求

问题在于，当我发送一个json对象（单击“btn”按钮时）时，它会拒绝，并显示以下消息：

CORS策略已阻止从源“”访问“”处的XMLHttpRequest:对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头

当然，我在后端设置了“Access Control Allow Origin”头（见下文）

如果我将“Content Type”头设置为“application/json”，就会发生这种情况。但是，如果根本没有设置头，或者头是“application/x-www-form-urlencoded”（因此，发送的消息与JSON不同），那么它就可以正常工作

前端的代码

btn.addEventListener('click', () => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:7300/test', true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.addEventListener('load', (e) => {
      console.log(e.target.responseText);
    });

    xhr.send(JSON.stringify({name: 'kek'}))
});

后端上的代码：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json());

app.post('/test', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Headers', 'Content-Type')
  // res.set('Content-Type', 'application/json');
  res.header("Content-Type",'application/json');
  console.log(req.body)
  res.json({success: true});
});

---

您可以使用

cors

中间件

---

此中间件自动设置标头以避免CORS问题（）。

当服务器响应POST请求时，您正在设置标头

错误消息显示：

对飞行前请求的响应未通过访问控制检查

飞行前请求是一个选项请求，而不是POST请求，因此不会在对它的响应中设置标头，也不会发出POST请求

---

---

使用。不要重新发明轮子。

现在它可以工作了，谢谢！但是你知道为什么手工设置标题不起作用吗？谢谢。我标记了另一个答案作为解决方案，但这篇文章也帮助了我。我投票赞成你的答案

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.post('/test', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Headers', 'Content-Type')