什么是跨域

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

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

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

下面俺胡汉三举个例子来说明一下主域名、附加域和子域名的区别：某站长在BlueHost购买虚拟主机时绑定了一个域名http://a.com (opens new window)，然后又想分别搭建http://b.com (opens new window)和http://bbs.a.com (opens new window)这两个站点，总共三个网站。这三个域名中http://a.com (opens new window)就是主域名，http://b.com (opens new window)就是附加域，http://bbs.a.com (opens new window)就是子域名。

如何解决跨域

反向代理

在后端利用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 详解 (opens new window)。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。

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

• HEAD
• GET
• POST

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

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-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并通过回调函数的方式拿到数据了。