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