前言

一、为什么会出现跨域问题？

1. 什么是跨域？

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

2. 没有跨域会出现的问题

javascript 施加的安全限制，防止他人恶意攻击网站比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。

二、解决方式

1. jsonp

原理：动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。

步骤：

去创建一个 script 标签
script 的 src 属性设置接口地址
接口参数,必须要带一个自定义函数名要不然后台无法返回数据
通过定义函数名去接收后台返回数据

代码如下（示例）：

//去创建一个 script 标签
var 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: HTTP://a.com //只允许所有域名访问

3. 反向代理

4. window + iframe

总结

干货~

解决跨域问题

前言