前端跨域问题的解决办法,两种类型

跨域问题是由于同源策略的原因,在协议(HTTP或HTTPS)不同、端口号(8080或8881)不同、主机IP(182.92.178.25或者182.92.178.26)不同时而导致的不能进行数据交换的问题。

当后端没有做跨域时,前端就需要自己配置。

类型一:使用代理服务器的方法:

原理:本机直接向服务器发起请求,服务器发现本机的协议、端口号或主机IP与自己不同,为了安全起见不会将数据响应出去,此时本机创建一个代理服务器,代理服务器在接收本机请求时是不会排斥的,收到请求之后会将请求转发给服务器,而此时代理服务器的协议、端口号或主机IP是自己设置的,也就是与服务器的相同。

方法一:在package.json中最外面的大括号里添加一条属性“proxy”,值为需要转发的协议+IP+端口。

例如:本地为http://localhost:8080,请求的数据在http://182.92.178.25:8880,那么在原来的位置还写成http://localhost:8080,在proxy后面写http://182.92.178.25:8880即可。

该方法优点是方便配置,缺点是只能配置一条转发,不适用于向多个服务器请求数据。

方法二:在src同级(也好像是src子级)下创建名为setupProxy.js的文件,在里面粘贴如下内容:

const proxy=require('http-proxy-middleware')module.exprot=function(app){app.use(proxy("api1",{//遇见api1前缀的请求就会触发该代理配置,必须放在端口号后面第一位target:"http://localhost:5000",//将带有api1的请求转发到的路径changeOrigin:true,//控制服务器收到的响应头中Host字段的值,Host字段标识请求从哪发出的。没太大影响,但最好加上。pathRewrite:{'^/api1':''}//重写请求路径,将路径中的api1给清除}),proxy("api2",{//可以配置多个代理,target:"http://localhost:5001",changeOrigin:true,pathRewrite:{'^/api2':''}}))
}

该方法缺点是配置较为麻烦,但优点是可以配置多重代理,可以转发任意数量的服务器。

方法三:在 根目录/config/config.js中写上如下配置:

proxy: {'/api': {//遇见api前缀就会触发该代理target: 'http://8.141.88.60:8000',//要转发的代理changeOrigin: true,//控制服务器收到的响应头中Host字段的值,Host字段标识请求从哪发出的。},
},

该方法是方法一和方法二的综合体,配置简单,并且可以配置多条代理。

类型二:nginx反向代理

如果是前端同学自己部署前端项目,并且服务器与后端不同时会用到这种方法,因为当项目上线之后,就不会走原来代码中配置的代理,所以,就需要使用nginx进行反向代理。前端同学想要学习部署项目的话可以看:阿里云+Xshell部署前端项目,从准备工作到部署成功,亲测详解,小白友好型_阿里云服务器部署前端代码-CSDN博客

 下方为整个nginx配置,反向代理部分已经标注出来,需要复制粘贴的话可以将文字部分删除。

server {listen       8880;server_name     localhost;location / {root /web/html1/dist;try_files $uri $uri/ /index.html;index index.htm index.html;}#这一块就是反向代理的操作,可以看出来这和使用代理服务器还是很像的location /api {#在路径中遇到api时进行转发proxy_pass http://8.141.88.60:8000;#转发路径}error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}
}

注意:同一种方法不一定适合所有情况,这边只提供了三种我遇到过的情况,同学们可以逐个尝试一下。

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

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

相关文章

《书生·浦语大模型实战营》第4课 学习笔记:XTuner 微调 LLM:1.8B、多模态、Agent

文章大纲 1. 大模型微调简介2 快速上手2.1 环境安装2.2 前期准备2.2.1 数据集准备2.2.2 模型准备2.2.3 配置文件选择2.2.4 小结 2.3 配置文件修改2.4 模型训练2.4.1 常规训练2.4.2 使用 deepspeed 来加速训练2.4.3 训练结果2.4.4 小结 2.5 模型转换、整合、测试及部署2.5.1 模型…

【QT5】<重点> QT串口编程

目录 前言 一、串口编程步骤 0. 添加串口模块 1. 自动搜索已连接的串口 2. 创建串口对象 3. 初始化串口 4. 打开串口 5. 关闭串口 6. 发送数据 7. 接收数据 二、简易串口助手 1. 实现效果 2. 程序源码 3. 实现效果二 前言 本篇记录QT串口编程相关内容&#xff0…

常见的中间件都在解决什么问题?

常见的中间件都在解决什么问题 RocketMQ RocketMQ 是一款功能强大的分布式消息系统。 RocketMQ 源码地址:https://github.com/apache/rocketmq(opens new window) RocketMQ 官方网站:https://rocketmq.apache.org 什么场景下用 RocketMQ&#xff1f…

线程安全的解决方案(概念版本)

线程安全其实本质 讲的是内存的安全。 多个线程对统一资源的操作可能导致这个资源的数据不一致性。 举例说明:比如 张三有100块钱,现在线程A是要花50元,线程二是要存300元,当线程A花50元后,还没有内存值修改&#xff0…

19.channel相关方法

channel close()可以用来关闭channel closeFuture()用来处理channel的关闭 sync方法作用是同步等待channel关闭 addListener方法是异步等待channel关闭 pipeline() 方法添加处理器 write() 方法将数据写入 writeAndFlush() 方法将数据写入并刷出 write()方法,将数据写入到…

Optional详解和常用API

目录 一、Optional简介 二、构建Optional对象三种方式 2.1 Optional.of(value) 2.1.1 使用案例 2.2 Optional.ofNullable(value) 2.2.1 使用案例 2.3 Optional.empty() 2.3.1 使用案例 三、Optional常用的api解析和使用案例 3.1 isPresent 3.1.1 使用案例 3.2 ifPrese…

登录MySQL方式

登录MySQL方式 方式一:通过MySQL自带的客户端 MySQL 客户端输入命令即可 方式二:通过window自带的客户端 从命令端(cmd)进入 mysql -h localhost -P 3306 -u root -p Enter password:密码登录方式: mysql -h 主…

深入理解指针(四)

目录 1. 回调函数是什么? ​2. qsort使用举例 2.1冒泡排序 2.2使用qsort函数排序整型数据 ​2.3 使用qsort排序结构数据(名字) 2.4 使用qsort排序结构数据(年龄) 3. qsort函数的模拟实现 1. 回调函数是什么? 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数…

VMware各版本镜像下载站

CDS Repository - /var/www/public/stage/session-120/cds/vmw-desktop/ws 参考: VMware各版本下载的镜像站(含windows和linux)_vm win7映像文件下载-CSDN博客

混淆矩阵-召回率、精确率、准确率

混淆矩阵 1 混淆矩阵2 混淆矩阵指标2.1 准确率2.2 精确率2.3 召回率2.4 特异度2.4 假正率2.5 假负率2.6 F1 分数 3 总结 1 混淆矩阵 混淆矩阵是一种用于评估分类模型性能的重要工具。它通过矩阵形式清晰地展示了模型对样本进行分类的结果,帮助我们理解模型在不同类…

【嵌入式】CAN总线详解

【嵌入式】CAN总线详解 一、CAN总线简介 CAN总线是一种控制器局域网总线,每一个挂载在CAN局域网的设备,都可以利用CAN去发送信息,也可以接收局域网的各种信息,每个设备都是平等的,共享CAN的资源。广泛应用于汽车、嵌…

从0开发一个Chrome插件:项目实战——翻译插件(附带申请谷歌翻译、百度翻译教程)

前言 这是《从0开发一个Chrome插件》系列的第十八篇文章,本系列教你如何从0去开发一个Chrome插件,每篇文章都会好好打磨,写清楚我在开发过程遇到的问题,还有开发经验和技巧。 专栏: 从0开发一个Chrome插件:什么是Chrome插件?从0开发一个Chrome插件:开发Chrome插件的必…

LabVIEW程序的常见加密方式

LabVIEW程序的加密对于保护知识产权和敏感数据至关重要。本文将详细介绍LabVIEW程序常用的加密方式,包括VI加密、代码保护、文件加密和通信加密等,帮助开发者选择合适的加密方法来确保程序的安全性和完整性。 LabVIEW程序的常见加密方式 VI加密&#xf…

【宠粉赠书】科研绘图神器:MATLAB科技绘图与数据分析

小智送书第二期~ 为了回馈粉丝们的厚爱,今天小智给大家送上一套科研绘图的必备书籍——MATLAB科技绘图与数据分析。下面我会详细给大家介绍这套图书,文末留有领取方式。 图书介绍 《MATLAB科技绘图与数据分析》是一本综合性强、内容丰富的书籍&#x…

Mybatis做批量操作

动态标签foreach,做过批量操作,但是foreach只能处理记录数不多的批量操作,数据量大了后,先不说效率,能不能成功操作都是问题,所以这里讲一讲Mybatis正确的批量操作方法: 在获取opensession对象…

动态规划解题步骤

状态规划题一般要列一个dp表 1、状态表示(重要) 什么是状态表示? 简单来说就是dp表里的值的含义 怎么得到状态表示? 1.题目要求 2.经验题目要求 3,分析问题的过程中发现重复子问题,找到状态表示 2、状态转移方程(重要) d…

Flutter学习(一)

1.Dart环境安装 官网:Get the Dart SDK | Dart Mac环境: Install Homebrew if needed. https://brew.sh/ Add the official tap. $ brew tap dart-lang/dart Install the Dart SDK. $ brew install dart 2.vscode配置 安装dart插件 安装code r…

哈喽GPT-4o——对GPT-4o 提示词的思考与看法

目录 一、提示词二、常用的提示词案例1、写作助理2、改写为小红书风格3、英语翻译和改写4、论文式回答5、主题解构6、提问助手7、Nature风格润色8、结构总结9、编程助手10、充当终端/解释器 大家好,我是哪吒。 最近,ChatGPT在网络上广受欢迎&#xff0c…

Nodejs--构建web应用

构建web应用 将从http模块中的服务器端中的request使劲按开始分析,request时间发生于网络连接建立,客户端想服务器发送报文,服务器解析报文,发现http请求的报文的时候,在出发request事件之前,已经准备好Se…

PDFFactoryFinePrint软件安装包下载+详细安装教程

简介: pdfFactory Pro(虚拟打印机)是一个无须 Acrobat 创建 Adobe PDF 文件的打印机驱动程序。 pdffactory pro虚拟打印机提供了比其他程序提供得更简单、更有效率和更少的花费的创建 PDF 文件的解决方案。用于需要安全的 PDF(法律文档、公司信息等)和其他高级功能…