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端口上。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- 解决前后端分离 vue+springboot 跨域 session+cookie失效问题
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
- idea+HBuilderX实现springboot+springdata-jpa+vue+axios前后端分离增删改查,分页+解决跨域问题的idea页面
- springboot+springdata-jpa+vue+swagger ui2+axios实现前后端分离一套增删改查,分页+解决跨域问题
- springboot+springdata-jpa+vue+swagger ui2+axios实现前后端分离一套增删改查,分页+解决跨域问题
- 使用 vue + springboot 前后端分离 跨域、cookie、session 问题,全套配置一篇就够了
- springboot+springdata-jpa+vue+swagger ui2+axios实现前后端分离一套增删改查,分页+解决跨域问题
- 【笔记】总结Springboot和Vue前后端分离的跨域问题
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
- vue-cli+spring boot前后端分离跨域及session丢失解决办法
- springboot 解决前后端分离时的跨域问题
- 详解springboot和vue前后端分离开发跨域登陆问题
- SpringBoot 解决前后端分离 跨域问题
- spring-boot前后端分离跨域问题的解决,主要是使用cors
- 前后端分离,spring boot跨域问题
- Node学习(4)vue+node 前后端分离项目ajax跨域session问题解决
- springboot前后端分离解决跨域
- 基于spring boot 的前后端分离跨域问题在后台的配置