vue前后端分离项目部署，Nginx、Apache反向代理配置详解，配置反向代理解决跨域问题

vue前后端分离项目部署，vue前后端分离项目必然会出现前后端不同域而跨域的问题，当然，你可以在前端拼接目标域并在后端处理好跨域，但更优雅的方式是给Nginx/apache配置反向代理。

Apache部署：

部署步骤：

1. 把npm run build 构建生产的文件（dist目录里的所有文件）拷贝到服务器的某目录下；
2. 在apache的配置文件httpd.conf里添加一个虚拟主机（这个很简单，可以参考下面示例的VirtualHost标签之间的类容）；
3. apache配置路由重写（没有这步vue项目在非/路由下刷新页面会产生404错误）；
4. apache配置反向代理（配置了这个你的项目就可以直接通过开发环境的代码构建部署，并且不用处理跨域问题）；
5. 重启apache,开始访问你的项目。

Apache路由重写和反向代理配置：

我这里是win环境，apache是wampserver里集成的。

给个例子：

我这里前端通过localhost:8088访问，后端服务在localhost:8086上。我的项目里/api 和/_api路由是后端的，所以需要将localhost:8088/api|_api路由代理到localhost:8086/api|_api。

先打开httpd.conf配置文件确认以下下模块是否开启：

（对照下面的内容去掉相应模块前面的#注释符）

	LoadModule negotiation_module modules/mod_negotiation.so
	LoadModule proxy_module modules/mod_proxy.so
	LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
	LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
	LoadModule proxy_connect_module modules/mod_proxy_connect.so
	LoadModule rewrite_module modules/mod_rewrite.so
	LoadModule rewrite_module modules/mod_rewrite.somod_slotmem_shm.so

然后再文件末尾加上如下内容（DocumentRoot和Directory根据自己的项目路径修改）：

	<VirtualHost *:8088>
	ServerName localhost:8088
	ServerAlias localhost:8088
	DocumentRoot ${INSTALL_DIR}/www/path/to/dist
	<Directory ${INSTALL_DIR}/www/path/to/dist>
	Options +Indexes +Includes +FollowSymLinks +MultiViews
	AllowOverride All
	Require local
	# 路由重写 没有这句vue项目在非/路由下刷新页面会产生404错误
	FallbackResource /index.html
	</Directory>
	# 关掉正向代理
	ProxyRequests Off
	<Proxy *>
	Order deny,allow
	Allow from all
	</Proxy>
	# 反向代理配置
	ProxyPass /api http://127.0.0.1:8086/api
	ProxyPass /_api http://127.0.0.1:8086/_api
	# 反向代理重定向配置
	# 如果响应报文的Header中有Location(3xx指定重定向的URL)或Content-Location(指定多个URL指向同一个实体)，则使用请求报文中HOST替换URL中的HOST部分。
	ProxyPassReverse /api http://127.0.0.1:8086/api
	ProxyPassReverse /_api http://127.0.0.1:8086/_api
	</VirtualHost>

重启apache，配置完成。

更多内容建议参考apache官网文档。

Nginx部署：

不少人用的可能是ningx服务器，nginx部署vue和apache的区别仅在于伪静态和反向代理配置、这里说下nginx的伪静态和反向代理配置

伪静态：

	location / {
	try_files $uri $uri/ /index.html?$args ;
	}

反向代理：

	location ^~ /api {
	index index.html index.htm index.php;
	proxy_pass http://127.0.0.1:8086;
	}

这样，访问到 /api 这个路由的请求就被代理到：:8086/api了,如果还有其他路由需要被代理添加location就行。