为什么会有跨域的问题出现，如何解决跨域问题.

Posted 2021-09-02 帅帅程序猿

   

目录

   

什么是跨域  

什么是同源策略

解决方式

1、jsonp

1.1）去创建一个 script 标签

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

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

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

2、 CORS：跨域资源共享

2.1）跨域请求后的响应头中需要设置

2.2）Access-Control-Allow-Origin 为发起请求的主机地址

2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域

带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符*

2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头

2.5）Access-Control-Allow-Methods，设置跨域请求允许的请求方式

3、反向代理

3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

4、window+iframe

---

什么是跨域  

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

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

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

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

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

什么是同源策略

    同源策略 是客户端脚本（尤其是 Javascript）的重要的安全度量标准。它最早出自 Netscape

Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，

域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和

文档的属性

解决方式

1、jsonp

1.1）去创建一个 script 标签

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

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

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

//去创建一个 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 以上

需要后台设置

2.1）跨域请求后的响应头中需要设置

2.2）Access-Control-Allow-Origin 为发起请求的主机地址

2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域

带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符*

2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头

2.5）Access-Control-Allow-Methods，设置跨域请求允许的请求方式

Access-Control-Allow-Origin: * //允许所有域名访问，或者
 Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问

3、反向代理

3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

打开 config/index.js,在 proxyTable 中添写如下代码：
 proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c"
 target: 'http://f.apiplus.cn', //源地址 
changeOrigin: true, 
//改变源
 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路径重写 }

4、window+iframe