Vue之Axios跨域問題解決方案

vue.config.js

//-----------------------Axios跨域請求-----------------------------------------
  devServer:{
    port:4000,//vue網頁訪問的端口
    host:"127.0.0.1",//vue網頁訪問的地址
    https:false,
    open:false,
    proxy: {
        '/sina': {  //為用於替換的的標識字符串
            target: 'http://192.168.1.7',//Axios跨域請求的IP
            changeOrigin: true, 
            ws: true,
            pathRewrite: {
                '^/sina': '' //不用改
            }
        },
         
      }
  } 
  //-------------------------------------------------------------------

Login.vue

 //------------------Axios跨域 Post請求--------------------------------
      var params=new URLSearchParams();
      params.append('login',"admin");
      params.append('password',"admin");
      
      this.$axios.post('/sina/api/sessions', params)
      .then(function (response) {
        console.log(response);
        
      }.bind(this))
      .catch(function (error) {
        console.log(error);
      });
//--------------------------------------------------------------

/sina 為標識符 替換為  http://192.168.1.7
跨域的請求的地址為  http://192.168.1.7/api/sessions

注：每次修改 vue.config.js 文件后 要 重啟項目 
Ctrl+C 輸入 y 退出
再重啟 npm run serve 

如果在一個項目中需要多個 請求地址，可以這樣寫
vue.config.js

  //-----------------------Axios跨域請求-----------------------------------------
  devServer:{
    port:4000,//vue網頁訪問的端口
    host:"127.0.0.1",//vue網頁訪問的地址
    https:false,
    open:false,
    proxy: {
        '/sina': {  //為用於替換的的標識字符串
            target: 'http://192.168.1.7',//Axios跨域請求的IP
            changeOrigin: true, 
            ws: true,
            pathRewrite: {
                '^/sina': '' //不用改
            }
        },
        '/phpUrl': {  //為用於替換的的標識字符串
          target: 'http://192.168.1.7:8080/VueApi',//Axios跨域請求的IP
          changeOrigin: true, 
          ws: true,
          pathRewrite: {
              '^/phpUrl': '' //不用改
          }
      }
    }
  } 
  //-------------------------------------------------------------------

Login.vue

       //-----------------用戶登陸判斷----------------------------------
      let { user, password, number } = this.login;
      var params=new URLSearchParams();
      params.append('user_name',this.login.user);
      params.append('user_pwd',this.login.password);
      params.append('user_tel',this.login.number);

      //this.$axios.post('http://192.168.1.7:8080/VueApi/Api_User_Login.php', this.login)
      this.$axios.post('/phpUrl/Api_User_Login.php', params)
      .then(function (response) {

        let { login_result, result } = response.data;//解析JSON
        console.log(login_result);
     
        if (login_result == "true") { 
             this.$router.push("/Home"); //直接跳轉   
        }else{
             this.formHint = "用戶名和密碼錯誤！"    
        } 

      }.bind(this))
      .catch(function (error) {
        console.log(error);
      });