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