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跨域访问也不会发送后续请求。