跨域问题

作者 vue 群里的小伙伴们问的最多的问题还是关于跨域的,其实跨域问题真的不是一个很难解决的问题。这里我来简单总结一下我推荐的几种跨域解决方案。

我最推荐的也是我司现在在使用的方式就是 cors 全称为 Cross Origin Resource Sharing(跨域资源共享)。这种方案对于前端来说没有什么工作量,和平时发请求写法上没有任何区别,工作量基本都在后端这里。每一次请求,浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是只要第一次配好了,之后不管有多少接口和项目复用就可以了,一劳永逸的解决了跨域问题,而且不管是开发环境还是正式环境都能方便的使用。

但总有后端觉得麻烦不想这么搞。那前端也是有解决方案的。

在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便的看一下 文档 就会使用了,楼主一些个人项目使用的该方法。但这种方法在生产环境是不适用的。在生产环境中需要使用 nginx 反向代理。不管是 proxy 和 nginx 的原理都是一样的,通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境生产环境
corscors
proxynginx

这里我只推荐这两种方式跨域,其它的跨域方式都很多但都不推荐,真心主流的也就这两种方式。