vue+springboot前后端分离工程跨域问题解决方案解析

Vue+SpringBoot前后端分离工程跨域问题解决方案解析 本文主要介绍了Vue+SpringBoot前后端分离工程跨域问题解决方案解析，通过示例代码详细介绍了跨域问题的解决方案，对大家的学习或者工作具有一定的参考学习价值。 一、解决跨域的原理 在前后端分离的工程中，前端工程和后端工程运行在不同的端口上，这会导致跨域问题的产生。只要协议、域名、端口有一个不同就会产生跨域问题。为了解决跨域问题，可以使用代理服务器来转发请求。假设前端A要去访问服务器C，可以在A和C之间设置一个代理B，A访问C时先访问B，再由B代为请求C并把请求结果返回给A，这样就可以解决跨域问题。其中需要保证的是A访问B和B访问C都不能存在跨域。 二、使用Vue的proxyTable Vue提供了proxyTable来解决跨域问题。通过配置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反向代理 Nginx也可以用来解决跨域问题。通过配置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; } } ``` 以上配置表示监听38080端口，把/请求转发到4200端口，把路径中带/bill-admin的都转发到80端口。这样我们在测试时，前端工程的访问地址就是:http://localhost:38080/，而前端工程中所有后台接口的路径都统一写相对路径/bill-admin/。这个Nginx就是上面说到的B，接收4200端口的请求并转发给80端口。 四、结论 本文详细介绍了Vue+SpringBoot前后端分离工程跨域问题解决方案解析，通过示例代码和Nginx反向代理，解决了跨域问题。希望对大家的学习或者工作具有一定的参考学习价值。