无法从浏览器发送json到Express服务器[复制]

Question

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

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

CORS策略阻止从http://localhost:7300/testhttp://localhost:7200访问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', 'html" target="_blank">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});
});

Answer 1

您可以使用cors中间件。https://expressjs.com/en/resources/middleware/cors.html

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

app.use(cors())

此中间件自动设置标头以避免CORS问题（https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS）。

Answer 2

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

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

错误消息显示：

对起飞前请求的响应没有通过权限改造检查

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

使用标准的cors中间件库。不要重新发明轮子。