1. 程式人生 > >vue vue-cli請求後臺服務地址要注意點

vue vue-cli請求後臺服務地址要注意點

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

我的僅能作為參考, 但是這是經過我的測試了跑起的