vue跨域请求配置

npm安装

$ npm install axios --save

新建vue.config.js

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    productionSourceMap: false,

    devServer: {

        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true,
                pathRewrite: {
                   
                    '^/api': ''
                }
            }
        }
    }
}

main.js 使用axios

import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import vueConfig from '../vue.config';
import qs from 'qs'
Vue.use(VueRouter);

Vue.use(VueAxios,axios);
Vue.use(ElementUI, {
    size: 'small'
});
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码

vue.config.js

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    productionSourceMap: false,

    devServer: {

        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true,
                pathRewrite: {
                   
                    '^/api': ''
                }
            }
        }
    }
}

import axios from 'axios';

const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    baseURL: '/api',
    timeout: 5000
});

src目录下新建request.js

import axios from 'axios';

const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    baseURL: '/api',
    timeout: 5000
});

service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;