vue打包後,接口請求404的完美解決方案
阿新 • • 發佈:2018-07-31
修改 後臺 完美解決 保存 跨域 pass rem nginx set
在開發環境中,和後臺對接為了解決跨域問題,使用了代理,也就是vue的proxyTable,但是打包放到生產環境中去時,接口請求不到,404,原因是開發環境的代理並不能用到生產環境,但是直接在請求接口是使用服務器地址,可以成功,但是會造成cookie丟失而失去權限驗證
我腦海裏出現有兩種辦法,一是使用代理,如何解決接口路徑請求404的問題,二是直接寫請求路徑,如何解決cookie丟失的問題
之前因為cookie丟失,後臺忙活了很長時間,好不容易才解決的,加之開發環境下並不會丟失,所以我的想法是繼續使用代理
在網上找了很多辦法,有不少人遇到這個問題,但是基本都沒有詳細的解決方案,好不容易才找到說可以試試用nginx反向代理的方式,OK,開幹
首先,前端還是先不改動,接口路徑依然是‘/api/...‘:
登錄服務器,找到nginx的安裝目錄下:cd /etc/nginx
打開配置文件 vi nginx.conf
按 i 修改,新增
location /api { proxy_set_header Host $host; proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.1:8080; // 接口地址,如果在同一個服務器上,可以直接這樣寫 }
保存退出,先esc,然後保存 :wq!
nginx支持熱啟動,所以直接重啟命令 service nginx reload
OK了,nginx反向代理生效了,現在可以繼續用代理,接口請求成功,也不會丟失cookie,皆大歡喜,希望本文對你有所幫助!
vue打包後,接口請求404的完美解決方案