如何解决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);
})

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何解决vue跨域本地

发表评论

提供最优质的资源集合

立即查看 了解详情