跨域:跨域及解决方法

一、什么是跨域

广义的跨域包括:

  1. 资源跳转:超链接<a>跳转、重定向、表单提交
  2. 资源嵌入:link、ifram、script、img,以及css样式中的background:url()、@font-face()等外链接
  3. 脚本请求:js的ajax请求、js或DOM 中的跨域操作

狭义的跨域:指浏览器同源策略限制的请求

注意:并不是所有广义的跨域操作都不被允许,只有被同源策略限制的跨域操作是不被允许的

二、什么是浏览器同源限制

浏览器为了安全考虑不允许访问不同域下的资源

注意两点:

  1. 同源限制只是浏览器的安全策略,不是http协议的内容
  2. 对于向不同域下发起的请求,浏览器会照常发出,服务端处理后也会正常返回结果,但结果会在返回后被浏览器拦截

浏览器判断同源的标准:

  1. 请求协议相同
  2. 请求域名相同(包括父子域名都相同,特别注意:域名与对应IP不是同源)
  3. 端口号相同

同源限制访问那些内容:

  1. cookie、LocalStorage、IndexDB等存储信息无法读取
  2. DOM对象无法获取
  3. Ajax请求无法完成

三、处理跨域的方法

1、JSONP

原理:使用<script>可以跨域加载资源。浏览器端定义回调方法处理返回数据,跨域请求参数带回调方法名;服务端需要返回方法名定义的方法,参数为需要的数据,这样浏览器接收后直接以数据为参数调用回调方法

// 浏览器端
function fn(data) {
   console.log(‘在这里处理返回数据:‘ + data)
}
<script src="http://a.com/get-date?jsonp=fn"></script>

// 服务器端返回数据格式
fn({name: ‘zhangs‘, age: 18})

优点:没有兼容性问题

缺点:只支持get请求

2、CORS

原理:在高版本的浏览器中,发现ajax请求跨域后会在请求头部添加额外信息添加额外请求(预检请求option),这样只要服务端发现跨域请求后在返回头部通知浏览器允许哪些站点跨域请求即可

过程:

  1. CORS在浏览器端代码没有任何区别,浏览器识别到跨域请求后自动对其进行处理,用户没有感知。
  2. 服务端处理后,在响应头部添加Access-Control-Allow-Origin,指定允许请求的源
  3. 浏览器收到响应后根据Access-Control-Allow-Origin判断本站点是否在允许范围内,允许则接收数据继续后续操作

确定:兼容性不如jsonp(IE10以上支持)

优点:基本满足http所有Method类型,也可以指定部分支持Method

3、WebSocket

WebSocket是支持服务端与客户端双向通信的应用层(与HTTP同层)协议,基于TCP协议。WebSocket在建立连接时需要借助http,但连接建立后双方通信过程与http协议无关。

通过WebSocket与跨域服务建立连接,就可以完成跨域请求

优点:协议自定义,减少数据内容

确定:主要用于双向通信的场景,否则长连接有一定的内存消耗

兼容性IE10以上,不过目前,对于低版本有一定的降级处理途径,也有Socket.io可以使用

4、postMessage

html5为了解决不同源不能获取DOM元素的问题,为window对象添加了postMessage方法。

window.postMessage(‘这里是要发送的信息‘, ‘http://192.168.xxx.xx:3000/‘)

第一个参数:发送的内容

第二个参数:接收消息的源,包括协议类型、域名、端口号

5、nginx跨域处理

第一种:静态资源添加Access-Control-Allow-Origin配置,原理同CORS(主要针对字体文件跨域请求,css、js等不受同源策略限制)

location / {
  add_header Access-Control-Allow-Origin *;
}

第二种:nginx反向代理解决跨域

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

原文地址:https://www.cnblogs.com/zs-note/p/9879057.html

时间: 2024-10-12 19:40:07

跨域:跨域及解决方法的相关文章

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr

canvas.toDataURL 由于跨域报错的解决方法

关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 解决方法,相信大家都知道了,就是在图片img加上crossOri

Windows 10 1607(周年更新)后加入域无法使用WIndows Hello解决方法

一.问题现象 Windows 10客户端更新2016年8月3日的周年更新后,版本更新到了1607,加入域后(AD版本为Windows Server 2012 R2)Windows Hello设置为灰色,无法设置,提示"某些设置由你的组织来管理". 二.问题原因 由于Windows Server 2012 R2组策略中没有关于PIN登录的设置,Windows 10升级到1607版本后Windows 2012 R2默认是禁用PIN登录的.如果要启用Windows Hello功能,只需要通过

造成跨域的原因和解决方法

浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子:比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源), 如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码. 何谓同源:URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示它们同源. 在浏览器中,<script>.<img>.<iframe>.<

Ajax跨域请求以及乱码解决

Ajax跨域请求2种解决方法 1 ) 什么叫跨域请求,协议,域名,端口号,其中一样不同都称跨域; 第一种:使用script标签发送请求; //创建一个script标签; var v_element=document.createElement("script"); //设置script的type 属性; v_element.type="text/javascript"; //设置src属性; v_element.src="http://127.0.0.1:

解决方法!:getImageData on &#39;CanvasRenderingContext2D&#39;: The canvas has been tainted by cross-origin data.

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 最近在自学html5 CSS3很推荐李刚的 这个书<html5.css3,js权威指南>,今天在家里测试发现 canvas中的getImageData报错 Failed to execute 'getImageData'

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 但很多时候我们却又不得不

ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebService方法,总报这个错误,贴图如下: 解决办法: 1.确定你的Silverlight项目及承载Silverlight的Web程序根目录下都包含2个跨域文件,分别是crossdomain.xml和clientaccesspolicy.xml: crossdomain.xml文件,如下: <?xml ve