在使用vue-cli3 构建项目的时候遇到的跨域问题

Question

第一次接触vue和vue-cli开发项目遇到了很多的坑。

我之前都是用jquery和ajax的前后端分离开发的项目，后来接触的vue+axois，发现渲染效率各方面都比传统的ajax好用，但是跨域问题各式各样，不知道该如何解决，之前遇到的跨域问题我在后端返回代码的时候增加头部允许域名即可。

例如当我增加token或者content-type的请求头，就会出现如下的跨域限制：

即便是普通的get请求也会改为options并返回405。

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

不过不是每次都会出现这个问题，有的时候正常有的时候会被限制。

后来改用了代理请求，在开发环境下得到了解决

devServer:{
        proxy:"http://www.api.local/"
    }

但是在生产环境下，好像又不执行这个代理了

请问大家有遇到这样的问题么

Answer 1

这种代理都是dev环境的, 生产环境的跨域一般都是 cors, 需要服务端处理才行.简单的来说, 采用cors的跨域方式(最普遍)如下:

1. 客户端发送请求, 首先会发送 options 请求, 然后服务端需要处理该请求, 返回允许的请求头
2. 客户端会自动重新发送请求, 如果请求头是都包含在允许的里面就可以成功到达服务器

具体的实施细节,网上找几个例子,核心就是上面两点

服务端

AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"},
AllowHeaders:     []string{"Origin", "Content-Length", "Content-Type"},
AllowAllOrigins:  true