为什么后端收到 POST 请求的数据还是报跨域？

更新于 2020-10-27写于 2020-10-27前端后端

这个问题做前端的基本都懂，因为预查请求的响应头没问题，然后真正的请求发出去收到的响应头少东西就会出现这种情况。

那么怎么能给做后端的同学解释清楚呢？还是直接上代码吧==!

preflight-request-server.js:

 1const Koa = require("koa");
 2const app = new Koa();
 3
 4function setCORSHeaders(ctx) {
 5  ctx.set("Access-Control-Allow-Origin", ctx.get("Origin"));
 6  ctx.set("Access-Control-Allow-Methods", "GET,HEAD,PUT,POST,DELETE,PATCH");
 7  ctx.set(
 8    "Access-Control-Allow-Headers",
 9    ctx.get("Access-Control-Request-Headers")
10  );
11}
12
13app.use(async (ctx) => {
14  if (ctx.method !== "OPTIONS") {
15    ctx.body = "request success";
16
17    // do something
18
19    // throw "error T_T";
20
21    setCORSHeaders(ctx);
22  } else {
23    setCORSHeaders(ctx);
24    ctx.status = 204;
25  }
26});
27
28app.listen(3000);

preflight-request-client.html:

html

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7  </head>
 8  <body>
 9    <script>
10      let headers = new Headers();
11      headers.append("Content-Type", "application/json");
12      fetch("http://127.0.0.1:3000", {
13        method: "POST",
14        headers,
15        body: "{}",
16      }).then(console.log);
17    </script>
18  </body>
19</html>

可以看到如果打开 // throw "error T_T"; 这个注释，OPTIONS 请求的响应头是正常的，但正式请求的响应头少东西就跨域了。

一般 OPTIONS 请求的响应头应该和正式请求的响应头一样，所以会给人一种请求数据能过来就不会跨域的误解。

顺便一提简单请求是不用发送预查请求的。上面的例子要发送 JSON 数据所以有预查请求。