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之Axios跨域问题解决方案

上一篇:android下载!一种非常简单的Android屏幕适配方案,最全的BAT大厂面试题整理


下一篇:mybatis 梳理10-- 配置文件 核心配置文件 mapper配置文件 结合 梳理3 复习