前后分离中跨域问题

前后分离中跨域问题

前言

现在开发中，前后分离已经成为主流开发模式。通常我们后端只负责写接口，前端实现接口调用和页面设计就好了。这样的话，后端开发 人员也就轻松很多了。原来的还要开发界面，对于后端人员来说就痛苦了。

问题

在开发过程中，我们前端接口调用的时候，后端地址和前端地址不一致的情况，如果浏览器访问的话，就存在浏览器的同源策略限制，导致接口调用失败。那这就是跨域问题导致的。

跨域：

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域，不同域之间的网络请求就会触发跨域问题。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

解决问题

解决跨域问题就从二个方便考虑。前端解决和后端解决。

前端解决方案

现在大家都是vue开发前端界面，接口调用就是axios了。前端就可以通过配置来进行前端跨域请求。

找到项目中 Axios 封装的文件，在 Axios 创建时增加属性  withCredentials: true ：

这样，就设置为true就可以让axios请求跨域接口了。完成配置：

   const service = axios.create({
        baseURL:  process.env.VUE_APP_BASE_API,
        withCredentials:  true,
        timeout:  5000
    })

后端解决方案

如果是tomcat开发的话，就继承webmvcconfigure这里面重写addcorsmapping方法即可。

前后分离跨域问题就这样解决了。大家有什么更好的方法，欢迎分享。

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！