归纳跨域几种解决方案

什么是跨域?

**说起跨域,就要知道什么是浏览器同源策略

**浏览器同源策略:必须是协议、域名、端口完全一致的才符合同源策略

**如果以上三项,有一项不同都涉及到跨域问题


为什么浏览器要设置同源策略呢?

没有同源策略限制的两大危险场景
浏览器是从两个方面去做这个同源策略的,一是针对接口的请求,二是针对Dom的查询。

没有同源策略限制的接口请求

没有同源策略限制的接口请求通常是因为开发者或服务器管理员采取了特定的措施来绕过或放宽同源策略的限制。同源策略是浏览器的一个安全机制,它限制了一个网页只能与其来源相同的网页进行交互。这里的“来源”指的是协议、域名和端口都必须相同。

通常涉及前端应用程序与后端服务之间的通信,特别是在这些服务位于不同源(即不同的协议、域名或端口)时。以下是一些可能导致跨域问题的常见场景:
1.前端应用和后端API位于不同域名:
假设你有一个前端Web应用(如https://frontend.example.com)与一个后端RESTful API(如https://api.example.net)进行通信。由于这两个服务位于不同的域名,浏览器会应用同源策略,阻止前端应用直接访问后端API。
2.前端开发环境使用localhost,而后端服务位于远程服务器:
在开发过程中,前端应用可能运行在本地机器上(如http://localhost:3000),而后端API则部署在远程服务器上(如https://dev-api.example.com)。由于端口和域名都不同,同源策略会阻止这种通信。
3.使用第三方API:
假设你的应用需要调用某个第三方API(如天气API或支付API),而这些API位于与你的应用不同的源上。没有适当的跨域设置,你的应用将无法与这些API通信。
4.使用iframe或popup窗口嵌入内容:
当你在一个页面上使用iframe或JavaScript打开的popup窗口嵌入来自其他源的内容时,这些内容与主页面之间可能会存在跨域问题。例如,你可能希望从iframe或popup中读取或修改主页面上的数据,但由于同源策略的限制,这通常是不允许的。
5.文件协议(file://)与HTTP/HTTPS之间的通信:
如果你在本地通过文件系统(如file:///path/to/your/app.html)直接打开HTML文件,并尝试与HTTP或HTTPS服务器上的服务进行通信,这也会触发跨域问题。
6.端口号不同:
即使域名相同,但如果端口号不同(如http://example.com与http://example.com:8080),也会触发跨域问题。
7.协议不同:
HTTP和HTTPS被视为不同的源。如果你的前端应用使用HTTP,而你的后端API使用HTTPS,那么它们之间的通信将受到同源策略的限制。
8.本地开发服务器与远程测试环境之间的通信:
在开发过程中,开发者可能会将代码部署到远程测试环境进行测试,但前端应用可能仍在本地运行。这种配置也可能导致跨域问题。
为了解决这些问题,开发者可以采用一些技术来允许跨域请求,例如CORS(跨源资源共享)、JSONP(JSON with Padding)、使用代理服务器、或配置浏览器以允许跨域请求(通常仅用于开发环境)


跨域解决方案

**1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域**

JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制,通过<script>标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。
jsonp 缺点是只能发送 get 请求


1)原生JS实现:

 <script>var script = document.createElement('script');script.type = 'text/javascript';// 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数script.src = 'http://www.domain2.com:8080/login?                              user=admin&callback=handleCallback';document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}</script>

服务端返回如下(返回时即执行全局函数):

handleCallback({"success": true, "user": "admin"})

2)jquery Ajax实现:

$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp',  // 请求方式为jsonpjsonpCallback: "handleCallback",  // 自定义回调函数名data: {}
});

3)Vue axios实现:

this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},jsonp: 'handleCallback'
}).then((res) => {console.log(res); 
})

4)node.js实现:

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();server.on('request', function(req, res) {var params = querystring.parse(req.url.split('?')[1]);var fn = params.callback;// jsonp返回设置res.writeHead(200, { 'Content-Type': 'text/javascript' });res.write(fn + '(' + JSON.stringify(params) + ')');res.end();
});server.listen('8080');
console.log('Server is running at port 8080...');

CORS(跨域资源共享):

**CORS 是一种 W3C 规范,它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。
服务器通过在响应头中添加 Access-Control-Allow-Origin 等字段来告诉浏览器哪些源可以访问其资源。
CORS 支持多种 HTTP 请求方法,如 GET、POST、PUT 等。**


1.)原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}
};

2.)jQuery ajax

$.ajax({...xhrFields: {withCredentials: true    // 前端设置是否带cookie},crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie...
});

3.)vue框架

a.) axios设置:
axios.defaults.withCredentials = true
b.) vue-resource设置:
Vue.http.options.credentials = true


服务器端代理:

这种方法通过在服务器端设置一个代理来转发客户端的请求到目标服务器。
代理服务器与目标服务器之间的通信不受同源策略的限制,因为它们是服务器端之间的通信。
客户端向代理服务器发送请求,代理服务器将请求转发给目标服务器,并将目标服务器的响应返回给客户端。


总结来说,没有同源策略限制的接口请求通常是通过 JSONP、CORS、服务器端代理、反向代理或负载均衡器等方法来实现的。这些方法各有优缺点,开发者需要根据具体场景和需求来选择合适的方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年西安交通大学程序设计校赛

A题 签到题 代码如下 //A #include<iostream> #include<algorithm> #define int long long #define endl \n #define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0); using namespace std; signed main() {IOSint a,b,c,d;cin>>a>>b>>c…

二叉树介绍及堆

文章目录 树 概念及结构 二叉树 概念及结构 特殊的二叉树 完全二叉树 满二叉树 性质 储存 顺序存储 链式储存 堆 概念及结构 小堆 大堆 建堆 向上调整建堆 向下调整建堆 TOPK问题 法一&#xff1a; 法二&#xff1a; 树 概念及结构 树是一种非线性的数据…

解决word里加入mathtype公式后行间距变大

1.布局>页面设置>文档网格&#xff0c;网格栏选为无网格 2.固定间距

探索标准差与方差的奥秘

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、标准差与方差的基础理解 代码案例 二、标准差与方差的计算方法 方差的计算 标准差的…

QT——QSlider实现,QT滑动控件的使用

目录 简介滑动块调节两种方法滑动条触发信号量理想滑动块运用&#xff08;参考&#xff09; 简介 QT中滑动条的控件叫QSlider&#xff0c;继承自QAbstractSlider类。 主要用途是通过滑块的滑动的方式在一定范围内调节某个值。根据调节的后得到的结果去执行一些处理&#xff0c…

【AI基础】数据获取与整理、打标、增强方法、增强库imgaug

文章目录 常见的数据集网站爬虫工具使用搜索引起图片爬虫视频网站爬虫 数据整理数据检查和清洗数据去重数据集划分 数据标注数据标注工具 label studio 数据增强什么是数据增强单样本数据增强多样本数据增强样本生成方法数据增强imgaugimgaug 操作imgaug 使用 常见的数据集网站…

这款AI绘画软件,带你快速生成高质量产品效果图!

前言 随着人工智能技术的飞速发展&#xff0c;AI在设计领域的应用越来越广泛&#xff0c;。今天&#xff0c;介绍的一款能够自动生成高质量产品效果图的AI绘画软件——STARTAI。这款软件以其强大的功能和便捷的操作&#xff0c;正在重新定义电商产品效果图的制作流程。 AI局部…

RocketMQ .NET

RocketMQ 是一款由阿里巴巴集团开发并开源给Apache软件基金会的分布式消息及流处理平台。以其高吞吐量、低延迟、高可用性等特点而广受欢迎。支持Java&#xff0c;C, Python, Go, .NET等。 异步解耦&#xff1a;可以实现上游和下游业务系统的松耦合设计&#xff0c;使得服务部…

小红书图文笔记怎么做?纯干货!

小红书图文笔记的制作是一门艺术&#xff0c;它需要结合精美的图片和有价值的内容&#xff0c;以吸引和留住用户的注意力。伯乐网络传媒给大家分享制作小红书图文笔记的干货指南&#xff0c;包括准备、制作、发布和优化的各个环节。 一、准备阶段 确定目标受众&#xff1a;找到…

说明 1px、1em、1rem、1vw、1vh 的区别

说明 1px、1em、1rem、1vw、1vh 的区别 单位&#xff08;units&#xff09;pxemremvwvh相对单位/绝对单位绝对相对相对相对相对含义像素相对于父元素字体大小&#xff08;倍数&#xff09;相对于根元素字体大小&#xff08;倍数&#xff09;相对于视口的宽度&#xff08;百分之…

EM算法最通俗理解

期望最大化算法&#xff08;EM&#xff09;是机器学习领域非常重要的算法之一&#xff0c;但作为一个工科生&#xff0c;每次看其推导过程&#xff0c;总会怀疑自己的智商是不是不够用&#xff0c;为什么每一步推导都能看懂&#xff0c;但放到一起就崩了呢&#xff1f;可能还是…

【NumPy】权威指南:使用NumPy的percentile函数进行百分位数计算

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

python爬虫之JS逆向——爬虫基础

目录 一、http协议 二、前端三剑客 1 HTML 标签 标签举例 2 CSS CSS的引入方式 选择器 属性操作 3 JS基础 JS的引入方式 JS的基本语法 变量赋值 数据类型 运算符 分支语句 循环语句 函数 JS的内置方法 字符串的内置方法 数组的内置方法 内置高阶方法 4 …

研学活动报名二维码怎么制作?

在组织研学活动时&#xff0c;老师们经常面临报名流程繁琐、信息收集不全面、统计工作耗时等问题&#xff1f;如何高效地管理学生的报名信息&#xff0c;确保活动顺利进行呢&#xff1f; 现在我们有了更多的选择。老师们可以快速制作出研学活动的研学活动报名二维码怎么制作&am…

【网络协议Http】Http中get,post,put,delete区别

Http协议 超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff0c;HTTP&#xff09;是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上。 【参考】 GET && POST 对比 关于tcp数据包&#xff1a;对于GET方式的请求&#xff0c;浏览器会把http hea…

Android 11 AudioPolicyService 启动流程

AudioPolicyService在init进程中启动&#xff0c;源码路径&#xff1a;frameworks/av/media/audioserver/audioserver.rc service audioserver /system/bin/audioserverclass coreuser audioserver# media gid needed for /dev/fm (radio) and for /data/misc/media (tee)grou…

DETR整体模型结构解析

DETR流程 Backbone用卷积神经网络抽特征。最后通过一层1*1卷积转化到d_model维度fm&#xff08;B,d_model,HW&#xff09;。 position embedding建立跟fm维度相同的位置编码(B&#xff0c;d_model,HW&#xff09;。 Transformer Encoder,V为fm&#xff0c;K&#xff0c;Q为fm…

非量表题如何进行信效度分析

效度是指设计的题确实在测量某个东西&#xff0c;一般问卷中使用到。如果是量表类的数据&#xff0c;其一般是用因子分析这种方法去验证效度水平&#xff0c;其可通过因子分析探究各测量量表的内部结构情况&#xff0c;分析因子分析得到的内部结构与自己预期的内部结构进行对比…

自学之路Flutter使用Provider进行状态管理

使用前的准备 首先在pubspec.yaml中配置&#xff0c;然后pub get,等待安装完成 我们首先创建两个比较简单的控制器&#xff0c;测试页面跳转之间的数据传递。 import package:flutter/material.dart;void main() {runApp(const MyApp()); }class MyApp extends StatelessWid…

python接口自动化之会话保持

&#x1f366; 会话保持-token 有的网站登录需要token鉴权&#xff0c;是啥意思呢&#xff0c;现在有两个接口&#xff0c;一个接口是登录&#xff0c;一个接口是提交订单&#xff0c;那你怎么保证&#xff0c;提交登录这个用户是登录状态呢。登录成功的接接口会在response里面…