关于vue-cli3的vue项目axios跨域设置

网上很多资料都是关于vue-cli2.x的。那vue-cli3的该怎么配置呢。用vue-cli3创建好项目以后会发现只有一个vue.cofig.js的配置文件而关于webpack的一些配置都不见了。其实很简单就在vue.config.js中进行代理配置就可以了

//vue.config.js
module.exports = {

//...
devServer: {
        proxy: {
            '/api':{//base Url
                target: url,//需要代理的网址路由
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''//将请求地址中的'/api'替换掉
                }
            }
        }
    },
}

接下来就是创建axiso部分

在npm install axiso -S后创建util.js

import axios from 'axios';
const Util={
    apiPath:'/api'
}

//web2/help/queryBarrageMessage
Util.ajax=axios.create({
    baseURL:Util.apiPath,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
Util.ajax.interceptors.response.use(res=>{
    return res.data;
})
export default Util;

调用方式在需要调用的.vue文件中的script中引入

import $ from '../util';
就可以请求了
$.ajax({

method: 'post',
url: '/help/queryBarrageMessage',
data:{}

})
注意如果要以application/x-www-form-urlencoded的编码格式请求，要对data数据进行改写
引入

const querystring = require('querystring');//node自带模块无需额外下载
对data进行querystring(object)就可以转换为如jqery提交的表单格式的请求数据

 

转载于:https://www.cnblogs.com/yihuite-zch/p/10482840.html