Vue项目axios跨域配置（vue-cil 5.0.1）

本文主要是介绍Vue项目axios跨域配置（vue-cil 5.0.1），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近想将之前写的毕业设计改成前后端分离，结果遇到了跨域问题，上网查了一些资料之后成功解决问题

安装axios

项目下打开终端运行代码安装

npm i axios -S

配置axios

import axios from 'axios' //引入axios
Vue.prototype.$axios = axios; //添加axios到Vue的原型对象上

配置proxy反向代理

由于我这里使用的cil是5.0.1

所以直接在vue.config.js添加

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        // 此处的写法，是为了 将 /api 替换成 http://localhost:8099/shopSystem
        target: 'http://localhost:8099/shopSystem',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
            //将url中的/api重写成''
          '^/api': ''
        }
      }
    }
  }
}

 之后只要url中包含/api就会重新将url重写为http://localhost:8099/shopSystem/.......

为了增加代码可读性，可以将/api加入到baseURL中

在mian.js中

axios.defaults.baseURL = '/api'

这样在使用axios中就可以不需要在url中手动加入/api了

至此跨域配置完成，能够完成跨域资源的访问

这篇关于Vue项目axios跨域配置（vue-cil 5.0.1）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！