浏览器:跨域及解决方法
一、为什么会出现跨域问题:
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能不能使用。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不一同,即跨域:
当前页面url | 被请求页面url | 是否跨域 | 原因 |
http://www.a.com | http:www.a.con/index.html | 没有跨域 | 同源(协议、域名、端口相同) |
http://www.a.com | https://www.a.com | 跨域 | 协议不同 |
http://www.a.com | http:www.b.com | 跨域 | 主域名不同 |
http://www.a.com | http://org.a.com | 跨域 | 子域名不同 |
http://www.a.com:8080 | http://www.a.com:8081 | 跨域 | 端口号不同 |
二、同源策略的限制:
1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2、无法接触非同源网页的 DOM
3、无法向非同源地址发送 AJAX 请求
三、跨域解决方法
3.1、设置document.domain
因为浏览器是通过document.domain属性来检查两个页面是否同源,因此只要通过设置相同的document.domain,两个页面就可以共享Cookie。(此方案仅限主域相同,子域不同的跨域应用场景。)
https://www.jb51.net/web/578404.html
需要两个页面都加上
3.2、window.postMessage()
页面和其打开的新窗口的数据传递、多窗口之间消息传递、页面与嵌套的iframe消息传递,上面三个场景的跨域数据传递
// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
// 父窗口向子窗口发消息(第一个参数代表发送的内容,第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');
调用message事件,监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {console.log(e.source); // e.source 发送消息的窗口console.log(e.origin); // e.origin 消息发向的网址console.log(e.data); // e.data 发送的消息
},false);
3.3、JSONP(json with padding)
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个<script>元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
ts使用jsonp:yarn add @types/jsonp
举例:jsonp调用360接口
https://www.csdn.net/tags/NtDakg5sNjA3NDAtYmxvZwO0O0OO0O0O.html
举例:jsonp调用百度接口
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin:0;padding: 0;}body{padding: 50px;}input{width: 300px;}ul{width: 300px;border: 1px solid #FF69B4;display: none;}li{list-style: none;}li a:hover{color: hotpink;}</style></head><body><input type="text" id="q" /><ul id="ul1"></ul><script type="text/javascript">function doJson(data){var oUl=document.getElementById('ul1')var html='';if(data.s.length){oUl.style.display = 'block';for(var i=0;i<data.s.length;i++){html+='<li><a href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'}oUl.innerHTML=html;}else{oUl.style.display='none'}}window.onload=function(){var oQ=document.getElementById('q')var oUl=document.getElementById('ul1')oQ.onkeyup=function(){if(this.value !=""){var oScript=document.createElement('script') oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=doJson'document.body.appendChild(oScript)}else{oUl.style.display='none'}}}</script></body>
</html>
3.4、CORS
CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求:前后端都需要进行设置
3.5、webpack本地代理
proxy: {'/api/v1': {target: "http://xx.x.x.xxx:8080",pathRewrite: {'^/api/v1': ''},secure: false,changeOrigin: true,logLevel: "debug"}}
3.6、websocket
Websocket 是 HTML5 的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 服务器与 客户端都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
3.7、Nginx反向代理
Nginx 实现原理类似于 Node 中间件代理,需要你搭建一个中转 nginx 服务器,用于转发请求。
使用 nginx 反向代理实现跨域,是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题,支持所有浏览器,支持 session,不需要修改任何代码,并且不会影响服务器性能。
我们只需要配置nginx,在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样,这个服务器上所有url都是相同的域 名、协议和端口。因此,对于浏览器来说,这些url都是同源的,没有跨域限制。而实际上,这些url实际上由物理服务器提供服务。这些服务器内的 javascript可以跨域调用所有这些服务器上的url。
注意:htpps协议网站不能嵌套http协议的页面
3.8、在nuxt3项目通过接口转发实现跨域。
nuxt3:接口转发,实现跨域_snowball@li的博客-CSDN博客
四、关注我,一起学习
五、参考链接:
什么是跨域?跨域解决方法_越努力,越幸运!-CSDN博客_跨域
浏览器:跨域及解决方法相关推荐
- 浏览器同源策略及跨域的解决方法
浏览器同源策略及跨域的解决方法 参考文章: (1)浏览器同源策略及跨域的解决方法 (2)https://www.cnblogs.com/laixiangran/p/9064769.html 备忘一下.
- vue3项目实战的请求接口问题(一)跨域问题+解决方法
vue3 跨域问题➕常用解决方法 前言引入 跨域问题 解决跨域问题常用方法
- [Unity WWW] 跨域访问解决方法
什么是跨域访问 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任 ...
- WebApi跨域的解决方法
由于前段时间项目需求,需要用到WebApi跨域,我在网上也查阅很多这方面的资料,但是最终还是决定自己写一篇记录一下. 当一个请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- WebApi Ajax 跨域请求解决方法(CORS实现)
ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别各种A ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 服务器端可控情形的Javascript跨域访问解决方法
在最近的一个web项目中为了实现bookmark功能碰到了javascript跨域访问的问题.起初,在google上搜的很多解决方案并不适用于我的情形,只在有一篇文章中提到的远程加载javascrip ...
- axios请求跨域前端解决_Vue中axios跨域请求解决方法
跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,浏览器执行 js 脚本时,会检查这个脚本属 ...
最新文章
- 使用代理网络配置maven,显示导入失败的原因
- Arduino--舵机
- Apollo进阶课程㉖丨Apollo规划技术详解——Understand More on the MP Difficulty
- 基于阿里云的 Node.js 稳定性实践
- Android开发中的正在加载动画效果
- Linux时间子系统之八:动态时钟框架(CONFIG_NO_HZ、tickless)
- U盘插在前面板不认,可以试试插在后面板
- 读书笔记《浪潮之巅》感悟
- SharePoint 2016 Beta 2 使用体验
- deepin linux软件安装,deepin 应用安装
- 【时间之外】面向监狱的编程?该学学网络安全法了(1)
- Lucene入门教程及java实现
- Ubuntu下安装微信(非网页版)、TIM、QQ
- 如何把阿里图标库的图标生成代码并应用于自己的项目
- bzoj2708木偶(dp)
- LaTex中图片插入
- 个人计算机cache是什么意思,cache在计算机中的作用是什么?
- 最小二乘法,简明公式整理,数学证明,matlab程序(自写代码、lsqcurvefit函数、fminsearch函数)
- 广州.NET微软技术俱乐部微信群有用信息集锦(10) - 大量json数据压缩方案
- 2022-07-09 cpu并行化指令集SIMD/AVX性能对比测试
热门文章
- sort排序函数用法
- 【基于深度学习的细粒度分类笔记4】图像识别与检测挑战赛冠军方案出炉,基于偏旁部首识别 Duang 字
- 天谕登录显示服务器有问题,天谕手游无法登陆怎么办 天谕手游进不去解决方法...
- 胖子哥的大数据之路(五)- 数据资源-垄断的壁垒
- Linux——安装mysql数据库
- css清除浮动无效,css清除浮动的处理方法
- Flink 1.4.2 版本踩过的坑
- php的max,min函数详解
- php表格 for,PHP用for循环做表格自动生成以及九九乘法表
- SpringBoot整合 ElasticSearchRestTemplate使用