http 跨域，复杂请求的怎么解决

Question

常规情况下跨域，只需要服务端设置响应头 即可

res.header('Access-Control-Allow-Origin', 'http://localhost:3001');  // *

这个情况，普通的get请求已经解决，但是

但在post请求时加之传递数据，此时已经是 非简单请求了

const params = {data: 1};
axios.post("http://localhost:3000/list", params)

应为 content-type: application/json;

这个时候也能通过前端设置请求 header content-type 转成简单请求

axios.post("http://localhost:3000/list", params, {
   headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Authorization": "1231"
      }
    })

但是如果前端自定义header 的 Authorization ，这个时候有出现跨域了；

我的问题是:

• 怎么保持Content-Type 是application/json;的情况下支持跨域
• 当头部有自定义字段Authorization时候，怎么跨域

补充：

下面这个配置 对第二个问题无效

  res.setHeader('Access-Control-Allow-Headers', "Authorization");

---

对option处理

app.all("*", function (req, res, next) {
  res.header(
    "Access-Control-Allow-Headers",
    "Authorization,Accept,Content-Type,Referer,sec-ch-ua,sec-ch-ua-mobile,User-Agent"
  );
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Allow", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});


app.post("/list", function (req, res) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3001");
  res.header("Access-Control-Expose-Headers", "Authorization");
  res.header("Content-Type", "application/json;charset=utf-8");

  res.json({
    list: [
      {
        id: 1,
        name: "ranck",
        time: "2020-02-03",
      },
      {
        id: 1,
        name: "ranck",
        time: "2020-02-03",
      },
      {
        id: 1,
        name: "ranck",
        time: "2020-02-03",
      },
    ],
  });
});

option截图

post 复杂请求截图

报错截图

Answer 1

你既然知道“简单请求”这个术语，那请问你是否知道“非简单请求”会有什么结果呢？看起来你对“简单请求”和“跨域请求”存在了理解偏差。

无论简单请求或非简单请求，都是可以通过设置 CORS header 让浏览器允许跨域请求的。所以你的问题根本就不成立：

• 怎么保持Content-Type 是application/json;的情况下支持跨域
• 当头部有自定义字段Authorization时候，怎么跨域

跨域非简单请求只是会额外产生一个 preflight 预检请求，也就是 method 为 OPTIONS 的请求，这个 OPTIONS 请求是规避不掉的，也无需规避，但是你的服务端必须正确响应这个 OPTIONS 请求。

所以答案就是：

Content-Type 为 application/json 以及 带 Authorization 的请求为非简单请求，会额外产生一个 OPTIONS 请求，只要 OPTIONS 请求正确响应，非简单请求也能正常跨域。

Answer 2

不需要这么复杂吧，直接使用nginx进行代理就行了

Answer 3

首先你需要这种方式跨域的原理是什么：

1. 跨域的接口会先自动请求该接口但是http方法是POST
2. 如果返回成功，且其中定义的头部信息与当前请求的是一致的话，就会触发真实的请求
3. 不一致就会失败

所以跨域，需要前后端一起设置，需要保证所有的header符号要求(把请求与服务端接受的一个一个对照查看)，自定义的请求头还需要设置Access-Control-Expose-Headers才能暴露出来。