对 js 高程 Preflighted Reqeusts 的理解
看JS高程遇到 Preflighted Reqeusts不大理解,遂百度下:
转自:http://todoit.me/ajax-preflight/
最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow-Origin)
(后来事实证明这不是一个很好的解决方案, 因为 vue-cli 提供了 proxy-table 作为 AJAX请求的代理, 只需要配置一下就好, 编译上线也不要改动代码)
however, 经过这次折腾, 学到了preflight request的姿势
preflight request 预请求
当你在跨域的情况下发送一个非简单请求时:
浏览器预先发送一个 OPTIONS 请求, 来查明这个跨站请求对于目的站点是不是安全可接受的 当服务端对 OPTIONS 请求返回表示支持跨域请求的 Origin, method, headers 时, 浏览器才会发送你所需要的真正的跨域请求
什么是简单请求
- 只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型 (Content-Type) 只能是
application/x-www-form-urlencoded
,multipart/form-data 或 text/plain
中的一种。 - 不包含自定义请求头
举个栗子
1. 发送预请求
我实际向服务端提交一个跨域的POST 请求, 请求的 Content-Type 是application/json, 这是一个非简单请求, 所以浏览器会发送一个 method 为 OPTIONS的预请求, 到服务端查询是否支持该跨域请求
请求信息:
Request URL: http://stu.dev/post
Request Method:OPTIONS
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Origin:http://localhost:8080
OK, 注意后面三行
Access-Control-Request-Method
: 在发出预检请求时带有这个头信息, 告诉服务器在实际请求时会使用的请求方式
Access-Control-Request-Headers
: 在发出预检请求时带有这个头信息, 告诉服务器在实际请求时会携带的自定义头信息. 如有多个, 可以用逗号分开.
Origin
: 表明发送请求或者预请求的域
2. 服务端响应预请求
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Origin:*
Allow:GET,HEAD,POST
服务端需要对预请求里对应的三个头进行响应:
Access-Control-Allow-Headers:Content-Type
: 表明服务端支持该跨域请求(实际请求)的请求头, 对应预请求里的Access-Control-Request-Headers:content-type
Access-Control-Allow-Origin:*
: 表明服务端支持跨域响应的域, 对应对应预请求里的Origin
Allow:GET,HEAD,POST
表明服务端支持该跨域请求的 Method
预请求的所有跨域头得到允许以后(及以上三个请求头一一对应), 浏览器才会发送实际请求, 所以服务端要根据预请求响应这三个请求头
3. 发送实际请求.
4. 响应实际请求.
最后
解决办法
如果你的跨域请求失败, 原因是预请求得不到正确响应
检查预请求, (那个 options 请求)的三个请求头
Origin
,Access-Control-Allow-Headers
,Access-Control-Request-Method
服务端分别加上
Access-Control-Allow-Origin: <预请求的 Origin 内容 | * >
,Access-Control-Request-Headers:<预请求的Access-Control-Request-Headers内容>
Allow:<预请求的Access-Control-Request-Method的内容>
这几个响应头
over.
案例参考:
打开http://www.uscfinvestments.com/usci,查看XHR中的https://cssecure.alpsinc.com/api/v1/dailyprice/usci的请求
参考
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/AccesscontrolCORS
https://www.w3.org/TR/cors/#resource-preflight-requests
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-SideAccessControl#预请求
对 js 高程 Preflighted Reqeusts 的理解的更多相关文章
- 《JS高程》创建对象的7种方式(完整版)
一.理解对象 ECMA-262定义对象:无序属性的集合,其属性可以包含基本值.对象或者属性. 我们可以把 ECMAScript 的对象想象成 散列表:无非就是一组 名值对,其中值可以是数据或函数. 创 ...
- js 高程 函数节流 throttle() 分析与优化
在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...
- js 高程 22.1.4 函数绑定 bind() 封装分析
js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...
- js高程3--面向对象的程序设计--创建对象
创建对象 这是js高程3--第6章面向对象的程序设计--第二节创建对象的总结与自己的理解,每一种模式都有自己的优点与缺点,搞清楚它们出现的历史原因,优缺点,我们才能使用的更加游刃有余! 本片文章并没有 ...
- 《JS高程》-教你如何写出可维护的代码
1.前言 在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码.很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以 ...
- 吃透Javascript数组操作的正确姿势—再读《Js高程》
Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- 《JS高程》JS-Object对象整理
继上篇<JS高程>对象&原型笔记,对JavaScript中的Object对象进行了整理,梳理一遍~ 参考文章:详解Javascript中的Object对象 ------------ ...
随机推荐
- MySQL主从不一致的几种故障总结分析、解决和预防
(1).主从不一致故障,从库宕机,从库启动后重复写入数据报错解决与预防:relay_log_info_repository=TABLE(InnoDB)参数解释说明:若relay_log_info_re ...
- MySQL中多表删除方法
如果您是才接触MySQL数据库的新人,那么MySQL中多表删除是您一定需要掌握的,下面就将为详细介绍MySQL中多表删除的方法,供您参考,希望对你学习掌握MySQL中多表删除能有所帮助. 1.从MyS ...
- 使用Sigar获取服务器信息
Sigar简介 Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件.它用来从许多平台收集系统和处理信息. 这些平台包括:Linux, Windows, Solari ...
- JVM虚拟机(四):JVM 垃圾回收机制概念及其算法
垃圾回收概念和其算法 谈到垃圾回收(Garbage Collection)GC,需要先澄清什么是垃圾,类比日常生活中的垃圾,我们会把他们丢入垃圾箱,然后倒掉.GC中的垃圾,特指存于内存中.不会再被使用 ...
- Strategy Execution with Strategy Maps and balanced score cards
4 barriers for strategy execution: - vision barrier - people barrier - resource barrier - management ...
- Atitit.struts2体系结构大总结
Atitit.struts2体系结构大总结 1. 国际化与异常处理 2 2. 第5章 拦截器 2 3. 第7章 输入校验 2 4. 避免表单重复提交与等待页面 2 5. Struts 2对Ajax的支 ...
- basic_string
// Components for manipulating sequences of characters -*- C++ -*- // Copyright (C) 1997, 1998, 1999 ...
- 存储管理器实验——SDRAM
序言:2440有nand和nor两种启动方式,在裸机部分,都是使用的nand启动. 现在,我们想在nand flash启动的时候,通过SRAM访问存储在外设SDRAM中的程序. nand启动,先把前4 ...
- vuex 开始
每一个vuex的应用的核心都是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态(state),vuex和单纯的全局对象有以下两点不同: 1,vuex的状态存储是响应式的 ...
- HTML5关于上传API的一些使用(下)
通过前面两篇的分享,我们已经搞定了单个文件的普通的上传,包括文件预览,图片预览,上传速度等前端界面的显示,这次我们来谈谈关于>XMLHttpRequest2.0在界面之后假如才用分片上传能做到一 ...