关于vue.js:vue跨域本地解决方案

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 本次分享适宜刚开始做我的项目的小伙伴们, 在我的项目开发的的过程中咱们会进行数据对接 (对接接口), 咱们会遇到跨域的问题, 上面我来分享一下我是怎么解决的, 心愿对你有所帮忙。
4. 废话不多说, 间接上操作:

// 第一步: 装置 axios(解决数据申请)
npm i axios -S

4-1. 在 main.js 中增加如下代码:

import axios from 'axios'

// 挂在到全局
Vue.prototype.$axios=axios;

5. 在 package.json 的同级新建一个 vue.config.js 文件, 增加如下代码:

// vue.config.js
module.exports = {
devServer: {  
  proxy: {  
    '/api': {  
    target: 'http://192.168.0.109:3000', // 后盾申请地址  
    ws: true,  
    changeOrigin: true,  
    pathRewrite: {'^/api': '' // 通过 pathRewrite 重写地址，将前缀 /api 转为 /}  
  }  
 }  
} 
}

6. 咱们在 vue 模板中如何应用呢?

// 在 mounted 中增加如下代码:
this.$axios.post("/pai/feng").then(res=>{console.log(res);
})

 在这里咱们就能够输入申请到后盾的数据啦。

7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。