vue封装跨域问题

首先新建一个vue.config.js

module.exports = {
    devServer: {
        proxy: {
            ‘/‘: {
                target: ‘http://www.eshareedu.cn/fkm/‘,   //跨域目标地址
                changeOrigin: true    //是否开启跨域
            }
        }
    }
}

在新建的api目录request.js里面

import axios from ‘axios‘    //引入axios
function req(method,url,params,data){
    let p=new Promise((resolve,reject)=>{      
        axios({
            method: method,    //请求方式
            url: url,　　　　　　//请求地址
            params:params,     //
            data:data　　　　　　//
          }).then(function(response) {  //成功返回

            if(response.data.errCode==10000){
                resolve(response.data);
            }
            else{　　　　　　　　　　　　　　//失败返回
                reject(response.data);
            }
            
           

          }).catch(function (error) {　　//失败返回

                reject(error);
               
          });
 

    });
    return p;　　　　　　　　　　//把接收到的值返回去

   
}
export default{

    get:function(url,params){
        return  req("get",url,params,null);
    },
    post:function(url,data){
        return  req("post",url,null,data);
    }
}

在main.js里面

import http from ‘@/api/request.js‘　　　　//引用封装的request.js

Vue.prototype.$http=http;　　　　　　　　　　//绑定到vue的原型上面

在页面上就可以调用了

gettable(){
    let _this=this;

    _this.$http.get("/api/admin/list",{}).then(res=>{
        _this.tableData=res.data.list;
    },fail=>{
        console.log(fail);
    })
}

vue封装跨域问题

原文：https://www.cnblogs.com/qiaoqiaojiang/p/14833090.html