vue+springboot前后端分离工程跨域问题解决方案解析
Vue+SpringBoot前后端分离工程跨域问题解决方案解析 本文主要介绍了Vue+SpringBoot前后端分离工程跨域问题解决方案解析,通过示例代码详细介绍了跨域问题的解决方案,对大家的学习或者工作具有一定的参考学习价值。 一、解决跨域的原理 在前后端分离的工程中,前端工程和后端工程运行在不同的端口上,这会导致跨域问题的产生。只要协议、域名、端口有一个不同就会产生跨域问题。为了解决跨域问题,可以使用代理服务器来转发请求。假设前端A要去访问服务器C,可以在A和C之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题。其中需要保证的是A访问B和B访问C都不能存在跨域。 二、使用Vue的proxyTable Vue提供了proxyTable来解决跨域问题。通过配置proxyTable,可以将前端请求转发到后端服务器。例如: ``` proxyTable: { '/bill-admin': { target: 'http://localhost', //目标地址 changeOrigin: true, //改变源 pathRewrite: { '^/bill-admin': '/bill-admin' //路径重写 } } } ``` 以上配置表示匹配前端请求路径中的/bill-admin,并转发到http://localhost,实际是转发到了80端口。如果原始请求是:http://localhost:4200/bill-admin/user/findAll,那么实际发往后端的请求是http://localhost/bill-admin/user/findAll。 三、使用Nginx反向代理 Nginx也可以用来解决跨域问题。通过配置Nginx,可以将前端请求转发到后端服务器。例如: ``` server { listen 38080; server_name 127.0.0.1; location / { proxy_pass http://127.0.0.1:4200; } location /bill-admin/ { proxy_pass http://127.0.0.1; } } ``` 以上配置表示监听38080端口,把/请求转发到4200端口,把路径中带/bill-admin的都转发到80端口。这样我们在测试时,前端工程的访问地址就是:http://localhost:38080/,而前端工程中所有后台接口的路径都统一写相对路径/bill-admin/。这个Nginx就是上面说到的B,接收4200端口的请求并转发给80端口。 四、结论 本文详细介绍了Vue+SpringBoot前后端分离工程跨域问题解决方案解析,通过示例代码和Nginx反向代理,解决了跨域问题。希望对大家的学习或者工作具有一定的参考学习价值。
- 粉丝: 6
- 资源: 986
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于二阶自抗扰ADRC的轨迹跟踪控制,对车辆的不确定性和外界干扰具有一定抗干扰性,基于carsim和simulink仿真 跟踪轨迹为双移线,效果良好,有对应复现资料,是学习自抗扰技术快速入门很好的资料
- 基于python的网页自动化工具项目全套技术资料100%好用.zip
- MATLAB【逆变器二次调频模型】 微电网分布式电源逆变器DROOP控制二次调频模型,加入二次控制实现二次调频控制,及二次调压控制,程序可实现上图功能,工况有所改变 需要matlab2021A版
- 抢购软件:快速复制信息
- 单机无穷大系统发生各类(三相短路,单相接地,两相接地,两相相间短路)等短路故障,各类(单相断线,两相断线,三相断线)等断线故障,暂态稳定仿真分析
- 微信文章爬虫项目全套技术资料100%好用.zip
- 基于动态窗口算法的AGV仿真避障 可设置起点目标点,设置地图,设置移动障碍物起始点目标点,未知静态障碍物 动态窗口方法(DynamicWindowApproach) 是一种可以实现实时避障的局部规划算
- Power Quality Disturbance:基于MATLAB Simulink的各种电能质量扰动仿真模型,包括配电线路故障、感应电机启动、变压器励磁、单相 三相非线性负载等模型,可用于模拟各种
- 数据爬虫项目全套技术资料100%好用.zip
- 聊天系统项目全套技术资料100%好用.zip