Vue项目中跨域问题的解决

Posted 2023-03-15

参考技术A

在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的Vue项目中，使用服务器代理的解决方案；针对不同的环境（开发环境/生产环境），采用了不同的服务器代理方案；

服务器代理的原理大概是这样：
代理服务器和访问源（请求端）是同源的，但和被访问服务器（资源端）是不同源的，但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题)，那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了 ；

这样配置完成后，我们发起的每次http请求的Request Url的前面一部分都会和我们本地的源一样；
举例：

我们项目跑在开发环境下的 http://localhost:8080 上，那么上述请求的Request Url的就是 http://localhost:8080/api/bookCate ;这应该就是我们的代理服务器中该资源的地址，与客户端同源；而数据的实际来源则是 http://219.216.5.26:8080/api/bookCate ，这样即实现代理跨域；

目前猜测这个代理服务器可能是Node；

nginx 版本： 1.16.1
修改 nginx.conf 文件下的 serve 下配置：

举例：

生产环境下的,我们项目跑Nginx服务器监听的 http://localhost:8088 上，那么上述请求的Request Url的就是 http://localhost:8088/api/bookCate ;
这应该就是我们的代理服务器中该资源的地址，与客户端同源；
而数据的实际来源则是 http://219.21.5.5:9903/api/bookCate ，这样即实现代理跨域；

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

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