vue+springboot先后端分离工程中跨域问题的解决

vue+springboot先后端分离工程中跨域问题的解决

假如是在同一台机器上开发，先后端分离的工程中出现跨域问题的缘由是，前端工程和后端工程运行在不一样的端口上。只要协议、域名、端口有一个不一样就会产生跨域问题，因此在前端工程中请求后端的接口时就会由于端口不一样而产生跨域问题。

1、解决跨域的原理

假设前端A要去访问服务器C,能够在A和C之间之间设置一个代理B，A访问C时先访问B，再由B代为请求C并把请求结果返回给A，这样就能够解决跨域问题。其中须要保证的是A访问B和B访问C都不能存在跨域。

2、使用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。

3、使用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端口上。