Vue 结合 axios 实现跨域

1、在 \config\index.js 的代理中做如下设置：

 proxyTable: {
    '/api/**': {
        target: 'http://localhost:3000',
        pathRewrite:{
            '^/api':'/'
        }
    },
},

2、在config里面的api.config.js 配置

为了区分线上线下环境，在 config 文件夹里面新建一个 api.config.js 配置文件，内容如下：

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
    baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

3、在main.js 入口文件里面配置

import apiConfig from '../config/api.config'

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

4、请求api的姿势

logout(){
    this.$http.post('/users/logout').then(result=>{
        let res = result.data;
        this.nickName = '';
        console.log(res);
    })
},
getGoods(){
    this.$http.post('/goods/list').then(result=>{
        let res = result.data;
        this.nickName = '';
        console.log(res);
    })
}

[使用vue-cli在开发环境中实现跨域步骤](https://www.jianshu.com/p/abbfe1143ff1)

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： Alvin
• 本文链接： https://alvinyw.github.io/2018/08/1/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！