前端JS数据交互之跨域

什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域

如何解决跨域 反向代理

在后端利用Nginx进行反向代理设置，例如将81请求转发到82上

server{
    # 监听9099端口
    listen 81;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:82;
    }    
}

不过这是后端的事情。作为前端初学者，了解即可。

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。

只要同时满足以下两大条件，就属于简单请求。
（1) 请求方法是以下三种方法之一：

HEADGETPOST

（2）HTTP的头信息不超出以下几种字段：

AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

这种跨域方式同样没有前端什么事，前端只需要请求后端给的接口即可，因为具体设置也是后端完成的。

ctx.set('Access-Control-Allow-Origin', '将允许跨域的域名写在这里')

JSONP

在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的，而jsonp就是利用这个原理。不过。。。同样需要后端定义了jsonp的接口，前端才可以请求。如果后端没有定义，前端也是没有办法的。而且这种方式只能进行GET请求

执行过程：

前端定义一个解析函数(如: jsonpCallback = function (res) {})通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传递给前端前端在script标签返回资源的时候就会去执行jsonpCallback并通过回调函数的方式拿到数据了。