Vue之Axios跨域问题解决方案

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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);
      });

以上是 Vue之Axios跨域问题解决方案 的全部内容， 来源链接： utcz.com/z/374749.html

回到顶部