什么是跨域

跨域是指指的是浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。

一、 基本介绍

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

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

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

二、跨域访问示例

假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息，A网站页面的代码如下（这里使用jquery的异步请求）。

从错误信息可以看出以上出现了跨域问题。

三、解决办法

1、jsonp跨域

JSONP（JSON with Padding：填充式JSON)，应用JSON的一种新方法，

JSON、JSONP的区别：

①   JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)

②JSONP 只支持get请求、不支持post请求

(类似往页面添加一个script标签，通过src属性去触发对指定地址的请求,故只能是Get请求)

2、nginx反向代理

www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口www.baidu.com/server.php，由这个接口在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html

3、PHP端修改header

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

４、document.domain【实现不同window之间的相互访问和操作】

跨域分为两种，一种xhr不能访问不同源的文档，另一种是不同window之间不能进行交互操作;

document.domain主要是解决第二种情况，且只能适用于主域相同子域不同的情况；

document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com中某个文档的document.domain可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成c.a.b.example.com，因为这是当前域的子域，也不可以设成baidu.com，因为主域已经不相同了。

兼容性：所有浏览器都支持；

优点：

可以实现不同window之间的相互访问和操作；

缺点：

只适用于父子window之间的通信，不能用于xhr；

只能在主域相同且子域不同的情况下使用；

使用方式：

不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。

---