前端请求跨域,解决方案

首先明确一点,同源策略是浏览器的。接口本身不会跨域,很简单的例子:在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/和前端同源而不会跨域。

 

posted @ 2022-04-26 16:15  小虫1  阅读(1313)  评论(2编辑  收藏  举报