跨域的解决方式

yanwei 发布于2019-08-23 16:24 / 2580人阅读

摘要：同源政策协议域名端口均相同。解决方式一原理通过动态添加一个元素，向服务器请求数据。服务器接收请求返回到指定具名回调函数。注意查询的中需要指定回调函数的名字。缺陷是方式获取，不支持。五是跨域资源分享。

同源政策：协议、域名、端口均相同。

非同源限制：

cookie、localStorage、indexDB无法读取。

DOM无法获取。

AJAX请求无法发送。

解决方式：

一、JSONP

原理：通过动态添加一个

页面二："https://www.example.com/page2.html"    //接收页面

事件接收window.addEventListener("message", function(){});中的message事件对象event有三个属性：
1、event.source：发送消息的窗口
2、event.origin: 消息发向的网址
3、event.data: 消息内容

三、iframe

iframe载入页面和src里面的目标域是同一个域，是能够发起ajax请求（父子窗口）。 //前提是同源，不同源就不可以发起ajax请求。

不同窗口同源之间是可以获取window对象，但是不能获取window对象的属性和方法。 //不同源会报错

1、document.domain + iframe（同源可用 -- 跨子域）

document.domain属性：一级域名相同，二级域名不同可以实现window对象获取。

页面一："https://segmentfault.com/page1.html"

页面二："https://segmentfault.com/page2.html"

缺陷：主域名得一致。

2、window.name + iframe（非同源可用）

window.name属性：在一个窗口的生命周期内，无论是否同源，同一个窗口的载入页面window.name属性是共享的，每个页面都可以操作。

页面一："https://segmentfault.com/page1.html"

页面二："https://segmentfault.com/page2.html"

缺陷：兼容性不好

3、location.hash + iframe（非同源可用）

片段标识符：片段标识符是指url#号后面的部分。只是改变片段标识符页面不刷新。

页面一："https://www.segmentfault.com/page1.html"

页面二："https://www.example.com/page2.html#messgae"

页面三："ttps:/www.segmentfault.com/page3html#somedata"

缺点：数据暴露在url，长度也有限制。

四、WebSocket

WebSocket：浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

设置WebSocket请求头信息，服务器支持就可以进行。

Origin: http://example.com        //根据域名是否在白名单内来判断是否可以通信

缺点：实现成本高。

五、CORS

cors是跨域资源分享。现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

缺点：服务器配置，占用主域带宽。

云服务器 GPU云服务器跨域请求方式跨域解决办法 js跨域解决方案 js ajax跨域解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102985.html

跨域

摘要：所谓同源是指协议域名端口三者相同，即便两个不同的域名指向同一个地址，也非同源，看看下面的产生跨域的场景你就会明白同源策略的含义。前端跨域问题我想很多同学遇到过，或者是刚刚请求数据成功, 然而转眼之后就会报错XMLHttpRequest cannot load http://www.server.com/server.... No Access-Control-Allow-Origin...

chaos_G 2019-08-23 18:01 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

alexnevsky 2019-08-22 15:00 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

i_garfileo 2019-08-15 14:27 评论0 收藏0
php后端控制可跨域的域名,允许图片跨域上传

摘要：跨域问题经常需要面对，前端需要做的比较直接要么选择异步提交，或者，要么表单提交基本可以搞定大部分跨域问题，但问题也比较明显，只能通过方式提交并且是通过把参数拼到上提交请求的但是所有浏览器有长度限制，不同浏览器长度限制不一样当出现要提交大段落跨域问题经常需要面对，前端需要做的比较直接要么选择ajax异步提交，XML或者jsonp，要么表单提交 jsonp基本可以搞定大部分跨域问题，但问...

Dean 2019-07-01 10:54 评论0 收藏0