这是一个创建于 2148 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题发现场景
前端在向后端发送 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', )  | 1 yeept 2019-12-27 16:51:01 +08:00 可以使用 nginx 配置在一个域下，使用 CORS 的话还是会有 OPTIONS 请求 |
 | 2 IMCA1024 2019-12-27 16:53:26 +08:00 有点奇怪，为什么不从根本上解决这个接口时间问题。。。。。。 |
 | 3 ai277014717 2019-12-27 16:56:13 +08:00 OPTIONS 是用来检查跨域权限的。收敛 url host 可解决吧。 |
 | 4 Chingim 2019-12-27 16:57:49 +08:00 1. 过早优化是万恶之源. 2. 数据可以放 params 里, 不一定要放 Header 里, 也可以放 body |
 | 5 HanMeiM 2019-12-27 16:58:25 +08:00 - -先去看看跨域吧 |
| 6 HanMeiM 2019-12-27 17:00:18 +08:00 哦，骚凹瑞，没看中间部分。 把 token 什么的放到 header 头里面，可以不用放 url，只要 url 没变是不会触发 options 的 |
 | 7 jinliming2 2019-12-27 23:03:17 +08:00 via iPhone 1，网关层拦截所有 OPTIONS 请求，直接返回跨域授权信息，不要让 OPTIONS 请求进到业务代码里。 2，遵从同源策略部署代码，当然这得看实际情况。 3，将请求变为简单请求，不要使用特殊的 header 头，参数完全可以放在 query 参数或是 path 中。 |
 | 8 qq450255457 OP @yeept 经过 google 查找后，通过 NGINX 把前后端置于一个域下，确实解决了 OPTIONS 请求的问题，谢谢。 |
| 9 qq450255457 OP @IMCA1024 该 API 接口耗时 75ms，加了个 OPTIONS 请求差不多 150ms.所以您说的接口是指什么呢？ |
| 10 qq450255457 OP @ai277014717 收敛 url host? |
| 11 qq450255457 OP 由于后端每个接口都需要参数 source，方便跟踪请求来源，那么你会把 source 放 body 中吗？ |
| 12 qq450255457 OP @jinliming2 您这是三种解决办法吗？ |
| 13 jinliming2 2019-12-30 15:58:24 +08:00 via iPhone @qq450255457 是的，你 8 楼的解决方案就是我说的第二种，遵从同源策略，放到同一个域名下。 你 9 楼的问题，加了 OPTIONS 请求时间翻倍，说明 OPTIONS 请求进入了业务逻辑，也就是没有区分 OPTIONS 请求和 GET 请求，导致业务处理了两遍。就是我说的第一种方案，网关层直接拦截 OPTIONS 请求返回跨域许可，这样服务端耗时就几乎为 0 了，只剩下一次请求来回的耗时。（当然，也有可能是其他原因） |
Select Language