1. 什么是跨域

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对

javascript 施加的安全限制，防止他人恶意攻击网站

比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户

名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中

输入的内容,这样用户名和密码就轻松到手了。

2.解决方式

1、jsonp

原理：动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为

所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。

步骤

1.1）去创建一个 script 标签

1.2）script 的 src 属性设置接口地址

1.3）接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

1.4）通过定义函数名去接收后台返回数据

//去创建一个 script 标签

let script = document.createElement("script");

//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称

script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";

//插入到页面

document.head.appendChild(script);

//通过定义函数名去接收后台返回数据 function jsonpCallback(data){

//注意 jsonp 返回的数据是 json 对象可以直接使用

//Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。

}

2、 CORS：跨域资源共享

原理：服务器设置 Access-Control-Allow-OriginHTTP 响应头之后，浏览器将会允许跨域请

求

限制：浏览器需要支持 HTML5，可以支持 POST，PUT 等方法兼容 ie9 以上

需要后台设置

Access-Control-Allow-Origin: * //允许所有域名访问，或者

Access-Control-Allow-Origin: a.com //只允许所有域名访问

3、反向代理

4、window+iframe