vue vue-cli請求後臺服務地址要注意點
阿新 • • 發佈:2019-01-11
vue-cli請求資料注意事項
這裡還是要好好解釋一下 一定要仔細看否則你回錯過的
首先我們這個專案是依賴vue-cli
然後我們再來說它的資料請求
我們發現我們的請求都是 localhost:8080/***/***
但是我們實際開發可不會是這個地址localhost:8080/***/***
那麼我們怎麼要怎麼辦?
下面就是我要說的
首先我要說的是vue-cli引用了一個叫Proxying
你想了解的話,上面給連結了,我就不說了。
1、那這個有什麼用呢?
2、它可以做代理,
1、代理的作用是什麼呢?
2、作用就是 跨 !域!
是不是聽到這兩個字心情爽了一大半,對吧 !扯了這麼久下面帖!代 ! 碼 !
/*config/index.js 下*/
proxyTable: {
//像這裡我介面是http://www.xxxx.x.xxx:8080/portal/role/roles
'/portal': {
// /portal只要含有這個的就是我們要委託的url
target: 'http://www.xxxx.x.xxx:8080',
//target:被請求的地址
changeOrigin:true,
//changeOrigin 是否代理
寫完後記得重新執行一下了npm run dev
還有就是記得把本地模擬資料(mock)介面註釋掉,他們之間會會有影響
上面是經過專案檢驗的有問題可以留言
上面說的時再開發環境下時這樣的,但是生產環境就不一樣了。
生產環境就不是這樣弄了
下面我們就來說說生產環境中怎麼寫請求的
//首先我們把請求的地址寫入
window.localPath='http://192.168.110.155:8080';
/*設定session共享 */
axios.defaults.withCredentials=true;
export const logout= () => {return axios.post(localPath+'/xxx/xxx/xxx',)}
你這些寫好了就些 剩下的是後臺的問題了
後臺只需要配置這兩個就行了
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");//這個指點可以進來的地址
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);//這裡是就是這是那個共享session
我的僅能作為參考, 但是這是經過我的測試了跑起的