ReactJS http-proxy-middleware请求头没有正确设置

Question

TL;DR:如何在http-proxy-middleware中实际更改请求头?

为了解决一些CORS错误，我使用http-proxy-middleware模块设置了一个本地代理。除了将我的请求模式设置为"no-cors"我需要改变一个额外的标题:"Content-Type"然而，这似乎不起作用。事实上，我甚至不能更改重定向(通过代理)请求的响应头。对于本地请求(抓取页面等)，我能够更改响应头，但即使这样，我也无法更改请求头。 这是我的setupProxy.js:

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use((req, res, next) => {
req.header("Content-Type", "application/json");
res.header("Access-Control-Allow-Origin", "*");
next();
});
function onProxyReq(proxyReq, req, res) {
console.log("test 1");
proxyReq.setHeader("Content-Type", "application/json");
req.header("Content-Type", "application/json");
}
app.use(
"/api",
createProxyMiddleware({
target: "https://my-domain.com/",
changeOrigin: true,
onProxyReg: { onProxyReq },
// secure: true,
// on: {
//   proxyReq: requestInterceptor(async (buffer, proxyReq, req, res) => {
//     console.log("test 2");
//   }),
// },
logger: console,
})
);
};

这是发送请求的代码:

try {
let requestOptions: RequestInit = {
method: "POST",
mode: "no-cors",
headers: {
accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
email: { username },
password: { password },
}),
};
fetch("https://localhost:3000/api/path/to/login/api", requestOptions)
.then(async function (response) {
console.log(response);
if (!response.ok) {
setError("Error code: " + response.status.toString());
}
return response.json();
})
.then(function (response) {
console.log(response);
});
} catch (e) {
console.log(e);
}

我从API本身得到一个错误(CORS避免正在工作):

Content type 'text/plain;charset=UTF-8' not supported

事实上，当我使用Chrome检查器查看请求时，请求头被设置为"text/plain;charset=UTF-8"。我尝试将响应头内容类型设置为"text/plain";但就连这一点也没有受到影响。但是，在通过我的代理路由请求之后，这怎么可能呢?

编辑:我找到了问题的一部分。将模式设置为"no-cors"在我的取回请求中改变了报头。但这仍然不能解释为什么我的代理不能编辑请求头。当我删除"no-cors"模式，但复制它产生的头，服务器给我错误400(错误的请求)。这意味着它没有收到与以前相同的请求，但这让我感到困惑，因为我手动复制了所有的头。

EDIT2:实际上，我发现当我删除mode: "no-cors"并设置"sec - fetch - mode"时，标题改为"手动设置时，仍为"交叉";在实际的请求中!

EDIT3:我试着通过ReqBin发送我的请求，它在那里工作:)!所以至少我们知道我的请求是正确的。

Answer 1

我发现改变" content-type " "cors模式下的Header是不允许的。解决方案是首先发送带有选项的飞行前请求。当它被接受后，您可以发送实际的请求。

您可以通过ReqBin发送请求，它将采取必要的步骤来成功完成请求。它甚至会生成代码为您重现请求。

var url = "https://thedomain.com/path/to/api";
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}
};
var data_ = '{"email": "*************", "password": "******"}';
xhr.send(data_);

这是可行的!:)