Header增加字段导致跨域OPTIONS请求不成功

今天团队关于跨域请求遇到了一个小问题,在前后端分离请求中会触发跨域OPTIONS请求,而后端使用拦截器处理OPTIONS请求时,前端无法正常继续GET请求。主要是对一个已经在使用的接口增加验证码功能,但是又不能修改原接口参数字段,故在Header中增加了一个自定义字段。

先是整理了浏览器对于跨域请求的定义,对跨域请求区分为“简单请求”与“非简单请求”。

  “简单请求”满足以下特征:

(1) 请求方法是以下三种方法之一:

     HEAD、GET、POST

(2)HTTP的头信息不超出以下几种字段:

     Accept

     Accept-Language

     Content-Language

     Last-Event-ID

     Content-Type:

         application/x-www-form-urlencoded、 multipart/form-data、text/plain

   不满足这些特征的请求称为“非简单请求”,例如:content-type=applicaiton/json , method = PUT/DELETE,HTTP头自定义字段(这次我们遇到的问题就是增加了自定义字段code)

1、非简单请求的预检测

如果我们发送的跨域请求为“非简单请求”,浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”,验证请求源是否为服务端允许源,这些过程对于开发者来说是感觉不到的,由浏览器代理。

2、请求的过程

简单请求

浏览器判断跨域为简单请求时候,会在Request Header中添加 Origin (协议 + 域名 + 端口)字段 , 它表示我们的请求源,服务端会将该字段作为跨源标志。

服务端接收到此次请求后 , 首先会判断Origin是否在允许源(由服务端决定)范围之内,如果验证通过,服务端会在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。

必须字段:

  Access-Control-Allow-Origin:表示服务端允许的请求源,*标识任何外域,多个源 , 分隔

可选字段:

  Access-Control-Allow-Credentials:false 表示是否允许发送Cookie。设置为true,同时ajax请求设置withCredentials = true,浏览器的cookie就能发送到服务端;

浏览器收到Respnose后会判断自己的源是否存在 Access-Control-Allow-Origin允许源中,如果不存在,会抛出“同源检测异常”。

总结:简单请求只需要服务端在接受到携带Origin字段的跨域请求后,在response header中添加Access-Control-Allow-Origin等字段给浏览器做同源判断。

非简单请求

进行非简单请求时候 , 浏览器会首先发出类型为OPTIONS的“预检请求”,服务端对“预检请求”处理,并对Response Header添加验证字段,客户端接受到预检请求的返回值进行一次请求预判断,验证通过后,主请求发起。


这里可以看到,浏览器连续发送了两个请求 , 第一个就是“预检请求”,类型为OPTIONS,此处也需要按简单请求中一样,在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。但此处要注意的是,因为我们在GET请求的Request Headers中设置了code这个属性 ,所以预检请求的Request Headers中的Access-Control-Request-Headers的值也为code,那Response Headers中的Access-Control-Allow-Headers必须携带code,否则OPTIONS请求会失败。

预检请求通过后,主请求与简单请求一致。

总结:非简单请求需要服务端对OPTIONS类型的请求做处理!

3、手动解决的办法

在服务端处理过程时,在响应头中增加以下几部分的内容即可:

Access-Control-Allow-Origin服务器能接受的跨域请求来源,配置 主机地址(http://www.xxx.com,如有端口也要加上), * 表示任意地址都行

Access-Control-Allow-Headers 表示能接受的http头部,此处要加入你自己构建的头部字段,如上面的code

Access-Control-Allow-Methods 表示能接受的http mothed ,看使用情况加上,如GET、POST、OPTIONS等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335