vue+springboot前后端分离工程跨域问题解决方案解析
假如是在同一台机器上开发，前后端分离的工程中出现跨域问题的原因是，前端工程和后端工程运行在不同的端口上。只要协议、域名、端口有一个不同就会产生跨域问题，所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题。
一、解决跨域的原理
假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B，A访问C时先访问B，再由B代为请求C并把请求结果返回给A，这样就可以解决跨域问题。其中需要保证的是A访问B和B访问C都不能存在跨域。
二、使用vue自带的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反向代理
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;
}
}
使用nginx时可以在配置文件中进行上边的配置。
前端工程运行在4200端口,后端工程运行在80端口，后端工程的项目路径是/bill-admin,上面配置的意思是监听38080端口,把/请求转发到4200端口，把路径中带/bill-admin的都转发到80端口。
这样我们在测试时，前端工程的访问地就是:http://localhost:38080/,而前端工程中所有后台接口的路径都统一写相对路径/bill-admin/**。这个nginx就是上面说到的B，接收4200端口的请求并转发给80端口。
因为nginx也会占用一个端口，所以不能把nginx也放在4200端口上，上面把前后台的入口都统一放在了38080端口上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了JSch如何使用sftp协议实现服务器文件上传下载操作，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2022-03-03
在我们数据库中有些时候会保存一些用户的敏感信息，所以就需要对这些数据进行加密，那么本文就介绍了Mybatis的TypeHandler加解密数据实现，感兴趣的可以了解一下2021-06-06
说到Spring Boot 单元测试主要有两个主流集成分别是Mockito,Junit,这个各有特点,在实际开发中,我想要的测试框架应该是这个框架集成者,本文给大家介绍了SpringBoot利用Junit动态代理实现Mock方法,需要的朋友可以参考下2024-04-04
LinkedList与ArrayList都是List接口的具体实现类。下面将介绍如何实现一个简单的LinkedList，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了java读取解析xml文件实例,本文创建了一个XML解析类同时讲解了循环节点输出方式,需要的朋友可以参考下2015-03-03
Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架，本质上相当于 Servlet，Spring MVC 角色划分清晰，分工明细，本章来讲解SpringMVC如何请求数据2022-07-07
Java中的PrintWriter 介绍_动力节点Java学院整理
PrintWriter 是字符类型的打印输出流，它继承于Writer。接下来通过本文给大家介绍java中的 PrintWriter 相关知识，感兴趣的朋友一起学习吧2017-05-05
这篇文章主要介绍了java 数学计算的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
SpringBoot使用SensitiveWord实现敏感词过滤
这篇文章主要为大家详细介绍了SpringBoot如何使用SensitiveWord实现敏感词过滤功能，文中示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-01-01
这篇文章主要通过示例详细为大家介绍Java中的堆以及优先级队列，文中的示例代码讲解详细，对我们了解java有一定帮助，需要的可以参考一下2022-03-03
最新评论