讨教 HTTP 中 OPTIONS 请求的优化？

问题发现场景

前端在向后端发送 GET 请求，会多个 OPTIONS 请求，由于 OPTIONS 的时间和 GET 的时间接近，所以想优化它，让它只做一次 GET 请求。

问题分析、优化

在各种 google 之后，得知由于前端添加了头部 token 和 source 自定义字段，导致 GET 请求变为非简单请求，所以会在正式通信之前，添加一次 HTTP 预检请求，也就是 OPTIONS 请求。
我尝试过不传 header 头时，确实只有一次 GET 请求，但由于业务需要，source 为必传字段，不然没法跟踪请求来源，当有 token 时，也必须要传
试着把后端的 Access-Control-Max-Age 设置为 30 天，那样子虽然可以减少 OPTIONS 的请求，但只能减少非第一次请求的，在第一次请求依然会有

想请教下各位大神有木有更好的解决方案？

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-Test</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  {{ info }}
</div>
<script type = "text/javascript">
axios.defaults.headers.common['source'] = 'test';
var url = "https://api.rvhqs.com/v1/home_search_rv_detail/?vehicle_id=661&pickup_branch_id=387&start_date=2019-12-29&end_date=2020-01-01&return_branch_id=387&start_time=10:00&end_time=10:00"
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(url)
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>
</body>
</html>

Django 后端 CORS 配置

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_PREFLIGHT_MAX_AGE = 2592000
CORS_ALLOW_HEADERS = default_headers + (
    'source',
)

jinliming2

2019-12-30 15:58:24 +08:00

@qq450255457 是的，你 8 楼的解决方案就是我说的第二种，遵从同源策略，放到同一个域名下。
你 9 楼的问题，加了 OPTIONS 请求时间翻倍，说明 OPTIONS 请求进入了业务逻辑，也就是没有区分 OPTIONS 请求和 GET 请求，导致业务处理了两遍。就是我说的第一种方案，网关层直接拦截 OPTIONS 请求返回跨域许可，这样服务端耗时就几乎为 0 了，只剩下一次请求来回的耗时。（当然，也有可能是其他原因）