无法从浏览器向快递服务器发送 json [重复]

Posted 2023-03-03

【中文标题】无法从浏览器向快递服务器发送 json [重复]

【英文标题】：Cannot send json to express server from the browser [duplicate]

【发布时间】：2019-07-20 23:47:03

【问题描述】：

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

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

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

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

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

前端代码

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

【问题讨论】：

expressjs.com/en/resources/middleware/cors.html

现在可以了，谢谢！但是你知道为什么如果手动设置标题它不起作用吗？

【参考方案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)。

【讨论】：

谢谢。我将另一个答案标记为解决方案，但这篇文章也对我有所帮助。我对你的答案投了赞成票

【参考方案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。不要重新发明***。