vue-nginx前后端分离部署方法

使用vue前后端分离部署时,若前端与api不在同一个域,那么会遇到很多的问题(比如跨域引起的问题)。但是我们可以采用nginx反向代理的方式,解决这个烦恼。

nginx主要配置内容如下:

        location / {
            root   D:/thSites/xbjs.web/dist;
            index  index.html index.htm;
	}
	location ~ ^/(api|css|font-awesome|js|images|)/  {
		proxy_redirect off;
		proxy_set_header Host $http_host;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header Upgrade $http_upgrade; 
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://127.0.0.1:8080;
	}

如上,后台api的路由,如/api/xx 使用nginx反向代理至127.0.0.1:8080即可解决。

疑问:

1、反向代理时,被代理的路径在api服务器如何对应呢?

解析:

比如api的路径是/api/user/add,nginx配置中将/api/反向代理到127.0.0.1:8080,那么在vue中调用api时,路劲应为/api/user/add,而非/api/api/user/add

分享到:更多 ()