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端口上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了Java代码精简之道，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
AlloyDB 是 Google Cloud 提供的一种高度可扩展、强性能的关系型数据库服务,它兼容 PostgreSQL,并提供了更快的查询性能和更高的可用性,本文给大家介绍了如何使用SpringCloud集成AlloyDB,需要的朋友可以参考下2025-01-01
JetBrains IntelliJ IDEA 配置优化技巧
这篇文章主要介绍了JetBrains IntelliJ IDEA 配置优化技巧,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了JAVA 观察者模式的的相关资料，文中代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-06-06
本文主要介绍了Java自定义线程池的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文主要是记录了如何在Linux环境下一步步安装JAVA JDK环境，非常简单实用，有需要的朋友可以参考下2014-10-10
下面小编就为大家带来一篇老生常谈JVM的内存溢出说明及参数调整。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
POI XSSFSheet shiftRows bug问题解决
这篇文章主要介绍了POI XSSFSheet shiftRows bug问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
mybatis 自定义实现拦截器插件Interceptor示例
这篇文章主要介绍了mybatis 自定义实现拦截器插件Interceptor，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Java实现线程的四种方式解析,线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程,一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序,需要的朋友可以参考下2023-10-10
最新评论