在使用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

Answer 2

这个本来就是开发环境用的, 生产环境跨域跟前端没啥关系了, 后端配置一个域名白名单就完事

Answer 3

这个和vue 还有vue-cli没什么关系，你首先弄明白跨域的原因是什么，为什么会跨域。至于cli代理为什么可以解决跨域，就是只是做了转发，服务器与服务器之间的请求是没有跨域一说的

Answer 4

这个分为前端解决和后端解决两种办法

前端解决：

• 封装请求，在请求的时候统一加上请求头；
• Nginx 转发的时候加上请求头；

后端解决

这个，就要看你后端是用什么做的服务，不同语言不同 WEB 服务的做法也不一样，网上搜索一下一大堆。

我在做项目的时候因为前端使用 Nginx 起服务，所以是统一在 Nginx上解决跨域的。

下面是我在 Nginx 上的配置

location /api/ {
     add_header 'Access-Control-Allow-Origin' '*';
     proxy_pass http://localhost:8080;
}

我不知道大佬们是怎么解决的，我只说一下我的方法。

接受理智的批评指正。