八种方式实现跨域请求

八种方式实现跨域请求前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下:浏览器的同源策略​提到跨域不能不先说一下”同源策略”。​何为同源?只有当协议、端口、和域名都相同的页面,则两个页面具有相同的源。只要网站的协议名protocol、主机host、端口号port这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。​同源策略限制从

大家好,又见面了,我是你们的朋友全栈君。

前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下:

浏览器的同源策略

首选,跨域是由于浏览器端的同源策略限制所得来。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

那么,何为同源呢?只有当协议端口域名都相同的页面,则两个页面具有相同的。只要网站的协议protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。

浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用(通常指使用 XMLHttpRequest 请求)。

跨域请求方式

解决跨域问题,最简单的莫过于通过 Nginx 反向代理 进行实现,但是其需要在服务器层面修改,且有可能请求的资源并不再我们控制范围内(第三方),所以该方式不能作为通用的解决方案,下面阐述了经常用到几种跨域方式:

方式一:图片ping或script标签跨域

图片ping 常用于跟踪用户点击页面或动态广告曝光次数。
script标签 可以得到从其他来源数据,这也是 JSONP 依赖的根据。

<img src="https://domain.com/pn">

缺点

  • 只能发送Get请求 ,无法访问服务器的响应文本(单向请求)

方式二:JSONP跨域

JSONPJSON with Padding)是数据格式 JSON 的一种“使用模式”,可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响,而利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。所有,通过Chrome查看所有JSONP发送的Get请求都是js类型,而非 XHR。
在这里插入图片描述

缺点:

  • 只能使用Get请求
  • 不能注册 success、error 等事件监听函数,不能很容易的确定 JSONP 请求是否失败
  • JSONP 是从其他域中加载代码执行,容易受到跨站请求伪造的攻击,其安全性无法确保

方式三:CORS

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:

Access-Control-Allow-Credentials: true
# Ajax设置
withCredentials: true

方式四:window.name+iframe

window.name通过在iframe(一般动态创建i)中加载跨域HTML文件来起作用。然后,HTML文件将传递给请求者的字符串内容赋值给window.name。然后,请求者可以检索window.name值作为响应。

  • iframe 标签的跨域能力;
  • window.name 属性值在文档刷新后依旧存在的能力(且最大允许2M左右)。

每个 iframe 都有包裹它的 window,而这个 window 是 top window 的子窗口。contentWindow属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。

下述用端口:10000表示 — domainA;10001表示 — domainB

<!-- localhost:10000 -->
<script> var iframe = document.createElement('iframe'); iframe.style.display = 'none'; // 隐藏 var state = 0; // 防止页面无限刷新 iframe.onload = function() { 
     if(state === 1) { 
     console.log(JSON.parse(iframe.contentWindow.name)); // 清除创建的iframe iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { 
     state = 1; // 加载完成,指向当前域,防止错误(proxy.html为空白页面) // Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame. iframe.contentWindow.location = 'http://localhost:10000/proxy.html'; } }; iframe.src = 'http://localhost:10001'; document.body.appendChild(iframe); </script>

<!-- localhost:10001 -->
<!DOCTYPE html>
...
<script> window.name = JSON.stringify({ 
    a: 1, b: 2}); </script>
</html>

注意:

  • 直接嵌入其他域(localhots:10001)下的URL会报错,所以需要加载完成替换为当前域的URL(localhots:10000),proxy.html为空白页面,只为解决该问题;
    在这里插入图片描述
  • 重新设置 src(http://localhost:10000/proxy.html)后导致页面不断刷新,所以通过 state 来控制;
  • 全部获取完结果后,清除该 iframe。

方式五:window.postMessage()

HTML5新特性,可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent,如果在函数执行的过程中调用了它,就会让后面的函数超时无法执行。

下述代码实现了跨域存储localStorage

下述用端口:10000表示 — domainA;10001表示 — domainB

<!-- localhost:10000 -->
<iframe src="http://localhost:10001/msg.html" name="myPostMessage" style="display:none;">
</iframe>

<script> function main() { 
     LSsetItem('test', 'Test: ' + new Date()); LSgetItem('test', function(value) { 
     console.log('value: ' + value); }); LSremoveItem('test'); } var callbacks = { 
    }; window.addEventListener('message', function(event) { 
     if (event.source === frames['myPostMessage']) { 
     console.log(event) var data = /^#localStorage#(\d+)(null)?#([\S\s]*)/.exec(event.data); if (data) { 
     if (callbacks[data[1]]) { 
     callbacks[data[1]](data[2] === 'null' ? null : data[3]); } delete callbacks[data[1]]; } } }, false); var domain = '*'; // 增加 function LSsetItem(key, value) { 
     var obj = { 
     setItem: key, value: value }; frames['myPostMessage'].postMessage(JSON.stringify(obj), domain); } // 获取 function LSgetItem(key, callback) { 
     var identifier = new Date().getTime(); var obj = { 
     identifier: identifier, getItem: key }; callbacks[identifier] = callback; frames['myPostMessage'].postMessage(JSON.stringify(obj), domain); } // 删除 function LSremoveItem(key) { 
     var obj = { 
     removeItem: key }; frames['myPostMessage'].postMessage(JSON.stringify(obj), domain); } </script>

<!-- localhost:10001 -->
<script> window.addEventListener('message', function(event) { 
     console.log('Receiver debugging', event); if (event.origin == 'http://localhost:10000') { 
     var data = JSON.parse(event.data); if ('setItem' in data) { 
     localStorage.setItem(data.setItem, data.value); } else if ('getItem' in data) { 
     var gotItem = localStorage.getItem(data.getItem); event.source.postMessage( '#localStorage#' + data.identifier + (gotItem === null ? 'null#' : '#' + gotItem), event.origin ); } else if ('removeItem' in data) { 
     localStorage.removeItem(data.removeItem); } } }, false); </script>

注意Safari下会报错:

Blocked a frame with origin “http://localhost:10001” from accessing a frame with origin “http://localhost:10000”. Protocols, domains, and ports must match.

避免该错误,可以在Safari浏览器中勾选 开发菜单 => 停用跨域限制。或者只能使用服务器端转存的方式实现,因为Safari浏览器默认只支持CORS跨域请求。

方式六:修改document.domain跨子域

前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用 document.domain 进行跨域,所以只能跨子域

根域范围内,允许把 domain 属性的值设置为它的上一级域。例如,在 “aaa.xxx.com” 域内,可以把 domain 设置为 “xxx.com” 但不能设置为 “xxx.org” 或者 “com”。

现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面,由于其 document.name不一致,无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将 document.name = 'xxx.com'; 设置一致,来达到互相访问的作用。

方式七:WebSocket

WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很棒的实现。相关文章,请查看:WebSocketWebSocket-SockJS

需要注意: WebSocket 对象不支持 DOM 2 级事件侦听器,必须使用 DOM 0 级语法分别定义各个事件。

方式八:代理

同源策略是针对浏览器端进行的限制,可以通过服务器端来解决该问题
DomainA客户端(浏览器) => DomainA服务器 => DomainB服务器 => DomainA客户端(浏览器)
实现HTTP、HTTPS代理请参照: 创建HTTP与HTTPS服务器与客户端

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142771.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • js 字符串截取substr和substring详解

    js 字符串截取substr和substring详解1.substr 方法返回一个从指定位置开始的指定长度的子字符串。stringObj.substr(start [, length ])参数stringvar:必选项。要提取子字符串的字符串文字或 String 对象。start:必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。length:选项。在返回的子字符串中应包括

  • iOS 根据已知NSDictionary的value找key[通俗易懂]

    iOS 根据已知NSDictionary的value找key[通俗易懂]NSString *objectId;   NSDictionary *userDic= @{@”11″:@”aaa”,@”22″:@”fff”,@”33″:@”已知道的value”,@”44″:@”ccc”};  [userDic enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop){ 

  • ospf数据库同步过程_OSPF的概念

    ospf数据库同步过程_OSPF的概念OSPF协议之链路数据库同步OSPF如何实现链路状态数据库的同步-链路信息主要包括:1、链路的类型;2、接口IP地址及掩码;3、链路上所连接的邻居路由器;4、链路的带宽(开销)。区别于RIP路由器之间交互的路由信息,OSPF路由器同步的是最原始的链路状态信息,而且对于邻居路由器发来的链路状态信息,仅作转发。最终所有路由器都将拥有一份相同且完整的原始链路状态信息。为…

    2022年10月15日
  • 学生信息管理系统(纯前端页面)———无后端数据库

    学生信息管理系统(纯前端页面)———无后端数据库无后端数据库版本的—-学生信息管理系统文末下载地址这学期的前端作业很奇怪,不用数据库实现学生信息管理系统,随便写了下。具体功能如下:实现了查看信息(单击查看按钮,查看具体信息,且为不可修改格式) 实现了修改信息功能(单击修改按钮,可以对学生的信息进行修改) 实现了新增功能(可以新增加一个学生的信息,添加到最后边) 实现了删除功能(在复选框中选择几个就删除几个) 实现了全…

  • 使用zabbix监控redis内存使用

    使用zabbix监控redis内存使用本篇提到的监控环境是有条件的,即默认单机只运行一个redis实例,且默认运行的端口是6379(也可以是其他端口,需要通过sed-i’s/6379/你修改的端口/g’xml模板文件修改模板文件里的端口号)。即然有这么多局限,岂不是适应用环境很差。确实,本篇算是一个基础部分,为后面提到的lld(lowleveldiscovery)自动发现做铺垫。由于前面几部分也对基础的东西做了很多总结…

  • Linux系统查看CPU「建议收藏」

    Linux系统查看CPU「建议收藏」    在linux的系统维护中,可能需要经常查看cpu使用率,分析系统整体的运行情况,以便性能分析优化。而监控CPU的性能一般包括以下3点:运行队列、CPU使用率和上下文切换。    对于每一个CPU来说运行队列最好不要超过3,例如,如果是双核CPU就不要超过6。如果队列长期保持在3以上,说明任何一个进程运行时都不能马上得到cpu的响应,这时可能需要考虑升级cpu。另外满负荷运…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号