Question

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

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

从原点“ http://localhost:7300/test”到“ http://localhost:7200”处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-来源的标头出现在请求的资源上。

当然，我在后端设置了“ 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});
});

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')

错误消息显示：

对预检请求的响应未通过访问控制检查

预检请求是OPTIONS请求，而不是POST请求，因此未在响应中设置标头，并且永远不会发出POST请求。

使用standard cors middleware library。不要重新发明轮子。

无法从浏览器发送json到快递服务器

2 个答案: