vue-cli nginx 反向代理处理跨域问题

需求

使用vue-cli3 搭建的框架

使用nodejs的express搭建的后台

现在把vue-cli启动服务，express启动服务，这时候跨域，vue-cli可以使用proxy代理处理跨域，或express也可以使用下面代码处理跨域

app.all('*', function (req, res, next) {
   res.header("Access-Control-Allow-Credentials", true)
   res.header("Access-Control-Allow-Origin", "*")
     res.header("Access-Control-Allow-Headers", "*")
   res.header("Access-Control-Allow-Methods", "POST,GET,DELETE,OPTIONS,PUT")
   res.header("X-Powered-By", ' 3.2.1')
   res.header("Content-Type", "application/json;charset=utf-8")
   next()
 }) 

express这种跨域在ie浏览器里会出现问题

现在使用nginx

到官网下载Nginx，解压，

1、下载完成后，解压缩，运行cmd，使用命令进行操作，不要直接双击nginx.exe，千万不要直接双击nginx.exe

可以在Nginx文件夹里按住shift键  右键鼠标打开命令窗口

2、使用命令到达nginx文件夹下

3、启动nginx服务，启动时会一闪而过是正常的     start  nginx

 

4、打开任务管理器在详细信息中可以看到Nginx已经启动

5、修改配置文件，进入解压缩目录，进入conf目录下 打开  nginx.conf   进行如下修改

 

 

5、重新启动服务    

 ./nginx -s reload

在浏览器里输入     http://localhost:8085/web/     默认就会打开    http://localhost:8080

页面里的接口调用如

http://localhost:5500   需要写成    http://localhost:8085/apis/list

 

Nginx会反向代理  调用   http://localhost:5500 

 

vue-cli 的服务和express的服务都需要代理，如果只代理接口不代理页面是不行的

 

start nginx
启动

./nginx -s reload
重启

./nginx -s quit
完整有序的停止nginx

./nginx -s stop
快速停止nginx