vue 解決axios 跨域問題

閒着沒事，假期敲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作代理

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