has been blocked by CORS policy: No Access-Control-Allow-Origin

遇见这个就是遇见跨域问题了,我的是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:

GET
HEAD
POST


在跨域时默认允许的Content-Type:

text/plain
multipart/form-data
application/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跨域访问也不会发送后续请求。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章