使用 Vue-cli 建立的項目,開發地址是 localhost:8080,須要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不一樣域名之間的訪問,須要跨域才能正確請求。跨域的方法不少,一般都須要後臺配置,不過 Vue-cli 建立的項目,能夠直接利用 Node.js 代理服務器,經過修改vue proxyTable接口實現跨域請求。在vue-cli項目中的config文件夾下的index.js配置文件中,修改前的dev:css
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }
只要修改裏面的proxyTable: {}項html
dev: { // 靜態資源文件夾 assetsSubDirectory: 'static', // 發佈路徑 assetsPublicPath: '/', // 代理配置表,在這裏能夠配置特定的請求代理到對應的API接口 // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html proxyTable: { '/api': { target: 'http://xxxxxx.com', // 接口的域名 // secure: false, // 若是是https接口,須要配置這個參數 changeOrigin: true, // 若是接口跨域,須要進行這個參數配置,爲true的話,請求的header將會設置爲匹配目標服務器的規則(Access-Control-Allow-Origin)
pathRewrite: { '^/api': '' //自己的接口地址沒有 '/api' 這種通用前綴,因此要rewrite,若是自己有則去掉
} } }, // 本地訪問 http://localhost:8080 host: 'localhost', // can be overwritten by process.env.HOST
而後重啓項目npm run devvue
注意:node
接口地址本來是 /save/index,可是爲了匹配代理地址,在前面加一個 /api, 所以接口地址須要寫成這樣的便可生效 /api/save/index。webpack
'/api' 爲匹配項,target 爲被請求的地址,由於在 ajax 的 url 中加了前綴 '/api',而本來的接口是沒有這個前綴的,因此須要經過 pathRewrite 來重寫地址,將前綴 '/api' 轉爲 '/'。若是自己的接口地址就有 '/api' 這種通用前綴,就能夠把 pathRewrite 刪掉。ios
一、參數proxyTable詳解:nginx
vue-cli的config文件裏的參數:proxyTable,這個參數主要是一個地址映射表,你能夠經過設置將複雜的url簡化,例如咱們要請求的地址是api.xxxxxxxx.com/list/1
,能夠按照以下設置:git
proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list' } } }
這樣咱們在寫url的時候,只用寫成/list/1
就能夠表明api.xxxxxxxx.com/list/1
.
那麼又是如何解決跨域問題的呢?其實在上面的'list'
的參數裏有一個changeOrigin
參數,接收一個布爾值,若是設置爲true,
那麼本地會虛擬一個服務端接收你的請求並代你發送該請求,這樣就不會有跨域問題了,固然這隻適用於開發環境。增長的代碼以下所示:github
proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', changeOrigin: true, pathRewrite: { '^/list': '/list' } } }
vue-cli的這個設置來自於其使用的插件http-proxy-middlewareweb
github:https://github.com/chimurai/http-proxy-middleware
深刻了解的話能夠看該插件配置說明,彷佛還支持websocket,很強大的插件。
二、pathRewrite含義:
用代理,首先你得有一個標識,告訴他你這個鏈接要用代理,否則的話,可能你的 html,css,js這些靜態資源都跑去代理。因此咱們只要接口用代理,靜態文件用本地。'/iclient': {}
, 就是告訴node
,我接口只要是'/iclient'
開頭的才用代理。因此你的接口就要這麼寫 /iclient/xx/xx
。最後代理的路徑就是 http://xxx.xx.com/iclient/xx/xx
。但是不對啊,我正確的接口路徑裏面沒有/iclient
啊,因此就須要pathRewrite,
用'^/iclient':''
, 把'/iclient'
去掉,這樣既能有正確標識,又能在請求接口的時候去掉iclient
。固然若是自己的接口中就有/iclient,那麼就能夠把pathRewrite這個參數去掉。
設置nginx配置文件:
location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://fanyi.baidu.com/v2transapi; }
日常咱們團隊開發時都在公司的局域網內,調用接口也是局域網內部的,可是項目上線時,請求接口是線上服務器端的,那麼就有接口之間的來回切換問題。
在使用vue-cli搭建項目之後,作相關配置就能夠實現,不用手動更改接口路徑,也能夠請求不一樣環境下的接口。
一、設置不一樣的接口地址
先找到如下文件
/config/dev.env.js
/config/prod.env.js
能夠看到dev.env.js裏面內容以下
這是生產環境的參數配置,而後咱們能夠再上面文件加入一行代碼,以下:這就是本地測試環境請求後臺接口的域名
而後找到prod.env.js文件,以下:
咱們加入一行代碼,以下:這是咱們上傳服務器之後,請求後臺接口的域名
二、在代碼中調用設置好的參數:
好比我在本項目中從新封裝axios(api文件在/src/api/index.js中),將配置好的接口地址做爲baseURL拼接到接口路徑中,應用參數部分以下:
最後從新啓動項目就能夠了,當npm run dev的時候就運行在生產環境,當npm run build的時候就是正式的線上環境。
後端程序代理
有一種方法不需要後端的配合和修改服務器配置 ,咱們本身就能夠作到。就是咱們本身啓一個後端程序作代理。而後把全部的請求轉發到服務器。這裏要用到node的一個包http-proxy-middleware。關鍵代碼(express)以下