去除options,减少options的访问

2019-12-03 16:37:01

一、前言

因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的。

之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会很少关注options。后面就遇到坑了,下面讲讲注意点。

二、说明

直接讲CORS,这是一种解决跨域的处理方案,支持各种请求的跨域(jsonp只支持get请求)。

它允许浏览器器向跨源服务器器,发出XMLHttpRequest 或 fetch请求,从⽽而解决了了AJAX只能同源使⽤用的限制'。

阮一峰《跨域资源共享 CORS 详解》

三、注意点

1、复杂请求(条件看上文)会发送一次预检请求options。比如我在fetch设置了:

headers: {'X-TOKEN': ‘自己设定’,} 

2、服务端要对预检查请求做出回应,后面才能继续发送真正的请求拿到数据。

OPTIONS /api HTTP/1.1Origin: http:XXX.comAccess-Control-Request-Method: GET POST PUTAccess-Control-Request-Headers: X-TokenHost: XXX.comConnection: keep-alive

3、干掉options

如果不做特殊处理,对于非简单请求每次都会发送一次预检请求。可以在服务端添加:

Access-Control-Max-Age: 1728000

该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。

4、关于cookie

需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。


  • 2020-02-22 17:57:05

    nuxtjs支持api接口,serverMiddleware

    Who can’t relate to this: You’ve built a small portfolio page for someone, maybe a company, a friend or yourself. And the only API endpoint you’d need is one for a form. What now? Scaffolding a new service just for this one endpoint?

  • 2020-02-22 17:59:34

    FullCalendar插件的基本使用带详细配置翻译

    前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求

  • 2020-02-22 18:03:10

    Vue组件中使用Sass或者Less全局变量

    本文以Sass做案例,Less的参考,基本配置大同小异。 假如我们有一个Sass的全局变量common.scss文件,路径 ../style/common.scss 代码如下:

  • 2020-02-23 23:27:26

    Nuxt.js 基础入门教程

    Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用。

  • 2020-02-24 18:36:17

    百度地图做电子围栏总结

    需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2020-02-24 18:37:17

    百度地图绘制轨迹点

    没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset:new BMAP.Size(x,y)进行微调 事实路况信息需要通过引没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset:new BMAP.Size(x,y)进行微调 3D视图部分城市没有开放开放 根据需求自己添加