查网站备案,wordpress电影采集,优质手机网站建设哪家好,网站默认首页文件顺序看JS高程遇到 Preflighted Reqeusts不大理解#xff0c;遂百度下#xff1a;转自#xff1a;http://todoit.me/ajax-preflight/最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow…看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-typeAccess-Control-Allow-Origin:*: 表明服务端支持跨域响应的域, 对应对应预请求里的OriginAllow: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/AccesscontrolCORShttps://www.w3.org/TR/cors/#resource-preflight-requestshttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-SideAccessControl#预请求转载于:https://www.cnblogs.com/xianshenglu/p/8401134.html
