本文共 1854 字,大约阅读时间需要 6 分钟。
遇见这个就是遇见跨域问题了,我的是nodejs服务端所以,在app.js里添加
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); next();});
这个保存重启一下服务器就好了
跨域
什么是跨域?
浏览器的同源策略限制了从同一个源加载的资源 (文档或脚本等) 如何与来自另一个源的资源进行交互,它是一个用于隔离潜在恶意文件的重要安全机制。
同源策略控制了不同源之间的交互,当浏览器从一个源的网页去请求另一个源的资源时,即浏览器在做跨服务的资源访问时,就会出现跨域问题.
举个例子
http://company.com/position/other.html 成功http://company.com/judge/index.html 成功https://company.com/position/other.html 失败 原因:不同协议 https和http属于跨域http://asdasda.com/position/other.html 失败 原因:不同域名(子域名不同也算跨域)域名和实际ip地址属于跨域,如:localhost和127.0.0.1虽然都指向本机,但也属于跨域
如何处理:
我这里选择是处理header(其他方法自行百度)
比如A源想访问B源的资源,那么通过修改B源中response 中 header的 "Access-Control-Allow-Origin"字段来允许A源的跨域请求。
浏览器检测到"Access-Control-Allow-Origin"字段,则会根据结果对响应做解析.
Access-Control-Allow-Origin : * 表示源B接收来自其它任何源的跨域请求Access-Control-Allow-Origin : 源A 表示源B只接收来自源A的跨域请求
CORS的预请求
在跨域时,并不是所用的方法都会被允许,对于非默认允许方法,需要经过近一步验证后才会得到跨域允许,这就涉及到CORS的预请求.
在跨域时默认允许的Method:
GETHEADPOST在跨域时默认允许的Content-Type:
text/plainmultipart/form-dataapplication/x-www-form-urlencoded跨域时其它的限制:
请求头的限制XMLHttpRequestUpload 对象均没有注册任何事件监听器请求中没有使用ReadableStream对象CORS预请求就是浏览器在在发生请求时,会预先自动发出一个OPTIONS请求来检测本次请求中涉及到的一些内容(如Method, Content-Type 等)是否被服务器接受。一个OPTIONS请求一般会携带下面两个与跨域相关相关的头:
Access-Control-Request-Method : 本次预请求的请求方法。Access-Control-Request-Headers:本次请求所携带的自定义首部字段
服务端收到该预请求后,会返回相关的响应头。主要会包括下面几个:
Access-Control-Allow-Origin: 服务器允许的跨域请求源Access-Control-Allow-Methods: 服务器允许的请求方法Access-Control-Allow-Headers : 服务器允许的自定义的请求首部字段
只有通过预请求,浏览器才会发生正式的数据请求。相对比正常的就是多了一个预请求,且预请求通过才会真正请求。预检请求只是一个检查的过程,它不会携带任何请求的参数;预检通过后的请求才会真正的携带请求参数与服务器进行数据通信。
若服务器对预请求没有任何响应,那么浏览器不知道服务器是否支持跨域访问,就而不会发送后续的实际请求;或者服务器不支持当前的origin跨域访问也不会发送后续请求。
转载地址:http://fvqen.baihongyu.com/