解决跨域的几种方式

Mowen-

已于 2022-07-11 08:28:24 修改

阅读量1.6k

点赞数 2

文章标签：前端

于 2022-07-10 19:33:55 首次发布

本文链接：https://blog.csdn.net/Wujunbin952/article/details/125709788

版权

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

什么是跨域？

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

二、解决方式

1、jsonp

原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤
1.1)去创建一个script标签
1.2)script的src属性设置接口地址
1.3)接口参数,必须要带一个自定义函数名要不然后台无法返回数据。
1.4)通过定义函数名去接收后台返回数据//去创建一个script标签
var script=documentcreateElement("script");
//script的src属性设置接口地址并带一个callback回调函数名称
script.src="HTTP://127.0.01: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 //只允许所有域名访问