如何解决vue跨域本地

本次分享适合刚开始做项目的小伙伴们，在项目开发的的过程中我们会进行数据对接(对接接口)，我们会遇到跨域的问题，下面我来分享一下我是怎么解决的，希望对你有所帮助。

废话不多说,直接上操作:

安装axios(处理数据请求)

npm i axios -S

在 main.js 中添加如下代码:

import axios from 'axios'

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

在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 转为/  
    }  
  }  
 }  
} 
}

我们在 vue 模板中如何使用呢?

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

这样我们就可以输出请求到后台的数据啦。

以上关于如何解决vue跨域本地的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。