vue 解決axios 跨域問題

標籤：編碼方式   為我   htm   puts   change   ack   ext   clear   heat   

閑著沒事，假期敲vue 請求資料，總結下vue跨越問題

第一種.伺服器伺服器不支援跨域請求

  1.當跨域無法請求的時候我們可以修改工程下config檔案夾下的index.js中的dev:{}部分。

    添加下面的代碼：

   proxyTable: {        ‘/api‘: {            target: ‘http://api.douban.com/v2‘,            changeOrigin: true,            pathRewrite: {                ‘^/api‘: ‘‘            }        }    },

 將target設定為我們需要訪問的網域名稱。

2.然後在main.js中設定全域屬性：

Vue.prototype.HOST = ‘/api‘

3.我們就可以在全域使用這個網域名稱了，如下：

var url = this.HOST + ‘/movie/in_theaters‘    this.$http.get(url).then(res => {      this.movieList = res.data.subjects;    },res => {      console.info(‘調用失敗‘);    });

第二種：伺服器端支援跨域

    String data = JsonUtil.toJsonNonNull(pubXtzdBos);        OutputStream out = response.getOutputStream();         out.write(data.getBytes("UTF-8"));//以UTF-8進行編碼          response.setHeader("Access-Control-Allow-Origin", "*");    //告訴瀏覽器編碼方式      response.setHeader("Content-Type","text/html;charset=UTF-8" ); 

就是能支援跨域那就可以使用jsonp來請求了。jsonp實際上就是通過添加script標籤來添加的，

請求回來的資料也是js格式。axios目前還不支援，只能自己手動建立script標籤，把請求的地址賦給script標籤的src屬性，最後添加到head標籤上，等到請求返回再把標籤刪掉：

   jsonpRequest: function (a, e) {            this._ajaxTimer && clearTimeout(this._ajaxTimer);            this._ajaxTimer = setTimeout(function () {                                var request_script = document.createElement(‘script‘);                request_script.setAttribute("id", "request_script");                   request_script.src = ‘http://xxxx‘+‘&t=‘ + Date.now();                window.callback = function (response) {                    // 移除指令碼                    document.body.removeChild(document.getElementById(‘request_script‘));                    console.log(response.content);                }                document.body.appendChild(request_script);            }, 500);        },

講真，本地開發適合第一種吧 然後可以正常使用axios進行ajax請求了，

         但這樣只能在開發模式下才能使用。打包部署的時候建議使用nginx做代理

，我也沒有試過第二種，也是查閱資料總結的，哈哈

 

vue 解決axios 跨域問題