有哪些跨域方法详解

234 阅读2分钟

什么是跨域

为什么会出现跨域

浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

跨域有哪些方法:

后端解决方案

nginx.
在请求接口和部署时,使用。通过xshell连接到和接口ip一致的服务器,使用Linux命令,在服务器中找到nginx配置config文件即可。

前端解决方案
单项跨域的

(一般用来获取数据),因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)的文件,此文件返回一个js函数的调用。

jsonp. 缺点,只支持get请求,而不支持post或者其他类型的http请求.后来被jquery封装,通过ajax实现。(参考文章 www.cnblogs.com/dowinning/a…)

vue中的跨域,通过vue-cli建立的项目,在config/index.js文件,proxyTable对象的属性配置项中进行配置。

CORS. CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

双向通信的,即两个iframe,页面与iframe或是页面与页面之间的。

document.domain 修改document.domain的方式只适用于不同子域的框架间的交互。

location.hash 每个window通过改变其他 window的location来发送消息(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于父窗口域名下的一个代理iframe),并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器不支持onhashchange事件,需要轮询来获知URL的改变,最后,这样做也存在缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等。

参考文章: developer.mozilla.org/zh-CN/docs/…