解决跨域的两种方法

同源策略(浏览器安全限制)

1、同源 (三个只要有一个不一样就是跨域) (都一样叫同源)
● 协议相同
● 域名相同
● 端口相同

2、限制
● cookie localStorage 信息共享
● ajax 限制跨域

为什么要有同源限制?
我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了

(1)解决跨域 JSONP

利用script 的src 不受同源限制 只要给它一个能找到的脚本 就能引入进来 并当作脚本运行

JSONP原理
创一个script标签、设置它的type类型、将url给script.src
通过cb(和后台制定的cd)字段 将创建的函数名 携带过去 地址?cb=callback
query.id 就是保存的函数名
script src会将引入进来的内容当作js脚本运行 callback执行

JSONP跨域 通过script的src请求接口 并将回调函数名 通过查询参数的某个字段 传递给后台
后台得到这个传递过去的函数名 拼接成函数执行字符串 并将数据以实参的形式 响应给客户端
客户端把他当作脚本加载运行 导致这个回调函数执行

(2) CORS(服务器支持) 解决跨域第二种方法

在响应头设置

允许所有源跨域
● setHeader("Access-Control-Allow-Origin","*")
允许某一个源跨域
● setHeader("Access-Control-Allow-Origin","http://localhost:63342")
● setHeader("Access-Control-Allow-Origin","http://127.0.0.1:63342")

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容