标签：5.0 axios 跨域 url 8099 api shopSystem

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

安装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了

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

标签：5.0,axios,跨域,url,8099,api,shopSystem
来源： https://www.cnblogs.com/66-RAKU/p/16110570.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。