解决 vue + go-zero 出现的跨域问题

环境：

前端： vue-element-admin

服务端： go-zero

问题：由于前端地址端口和服务端端口不一样导致请求跨域

先放结果：

main()中修改

func main() {
	flag.Parse()

	var c config.Config
	conf.MustLoad(*configFile, &c)

	ctx := svc.NewServiceContext(c)

	server := rest.MustNewServer(c.RestConf, rest.WithCustomCors(nil, notAllowedFn, "http://localhost:9528")) // 客户端地址
	defer server.Stop()

	handler.RegisterHandlers(server, ctx)

	fmt.Printf("Starting server at %s:%d...n", c.Host, c.Port)
	server.Start()
}

func notAllowedFn(w http.ResponseWriter) {
	w.Header().Add("Access-Control-Allow-Headers", "x-token")
}

解决过程：

在github中找到作者回答

现在跨域可以这么写，从 v1.2.3 开始

srv := rest.MustNewServer(c, rest.WithCors())

如果单个域名可以这么写：

srv := rest.MustNewServer(c, rest.WithCors("http://example.com"))

 改好之后在前端依旧报错：

Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.

需要在Access-Control-Allow-Headers中添加“x-token”

如果是v1.2.3，我的办法是直接修改源代码 rest/internal/cors/handlers.go 

中

allowHeadersVal  = "Content-Type, Origin, X-CSRF-Token, Authorization, AccessToken, Token, Range"

在后添加x-token

在1.2.4版本之后作者添加了WithCustomCors方法可以自定义response

做法如上。

原理可参考 跨域资源共享(Cross-origin resource sharing)CORS_Coder-CSDN博客

在找到WithCustomCors之前还尝试过在vue中使用代理

在 vue.config.js 中的 devServer 添加

    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
      }
      },
    },

本地会虚拟化一个服务器帮你把这个请求代发给后台，从而避免跨域问题。

这个方法一直报503，未找到原因