前端请求跨域，解决方案

首先明确一点，同源策略是浏览器的。接口本身不会跨域，很简单的例子：在postman里可以请求任何接口，为啥？因为postman没有同源策略。

实际上，后端程序彼此直接请求接口，也不会存在跨域，比如一个go程序请求php的接口，不存在跨域。总之，跨域只能浏览器的同源策略有关。

目前工作中最常见的2个解决方案：cors和nginx代理

1.cors

不考虑cookie的情况下，cors工作全部由后端完成，beego的处理：

 

beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
		AllowOrigins:     []string{"http://gpu.ai-galaxy.cn"},
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
		AllowHeaders:     []string{"Origin", "Authorization", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
		ExposeHeaders:    []string{"Content-Length", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
	}))
	beego.Run()

2.nginx代理

这个前端需要配置nginx即可，开发环境中用的webpack-dev-serve代理。生产环境换成nginx代理即可，原理类似。

例子：请求的接口为：https://app.ai-galaxy.cn/login

nginx配置：

 location ^~ /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass https://app.ai-galaxy.cn;
}

前端配置:

axios.defaults.baseURL = '/api'

　

解释下：当我们访问前端访问 /api/login时，nginx会代理到https://app.ai-galaxy.cn/login是上。  相当于/api/指向https://app.ai-galaxy.cn/。 /api/和前端同源而不会跨域。