vue-cli3 跨域配置-含示例

2020-03-12
1分钟阅读时长

安装axios

在项目目录下运行:cnpm install --save axios vue-axios.

示例

以在main.js中连接后台为例,其他页面在axios前加上this.即可。

main.js

import Vue from 'vue'   //重要!!!
import axios from 'axios'   //重要!!!
import VueAxios from 'vue-axios'    //重要!!!
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueAxios, axios)    //重要!!!

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

//************************************重要!!!
axios({ //如果是在其他页面,使用this.axios
  method: 'post',
  url: '/api/user', //  "/api"很重要!!!!
  data: {
    username: 'xxxxx',
    password: 'xxxxx'
  }
})
  .then(function(response) {
    alert(response)
  })
  .catch(function(error) {
    alert(error)
  })

url: '/api/user'中,/api是在vue.config.js中配置的(详见后续),/user是接口地址,更多可参考官方文档

vue.config.js

文件内容应该是这个格式:

module.exports = {
    ...
}

修改如下:

module.exports = {
devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',    //API服务器的地址
        ws: true,   //代理websockets
        changeOrigin: true, // cnpm 虚拟的站点需要更管origin
        pathRewrite: {
          //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': ''
        }
      }
    }
  }
}
Avatar
Ruiqi 有梦想,有追求,有吃的,有喝的,有玩的,有爱的