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端口上。