Vue项目前后端分离跨域问题解决方案

使用nginx反向代理解决前后端跨域问题

操作步骤

下面我以windows下面的nginx为例进行演示说明，Linux环境下的nginx使用方法大致相同。

1) 下载nginx

下载地址：http://nginx.org/en/download.html
我下载的如下图所示的版本，

2)解压

3) 进入conf目录，打开nginx.conf文件并修改其配置

4) 前端vue代码打包

打包前端vue工程代码,

打包后的会在vue工程目录下生成dist文件夹的内容，

5) 前端打包的文件放到nginx的html目录下面

6) 启动nginx

7) 功能测试

访问http://localhost:8081/ 备注：这个端口8081是nginx的端口