vue中前端代理跨域问题实例总结
前言
这几天在学习vue进行前后端交互时出现了跨域问题，也是经历查文章查文档和自己实践总结才最终解决。这篇文章就对此进行总结，以防忘记，同时也希望能对正在经历该问题困扰的同学们有所帮助。注意：这里讲解的是vue2.x版本的方法！
第一
首先我们需要先确定我们所使用的接口名，我这里使用的自己Java后端的接口和python后端的接口
http://localhost:8081/articles/findArticlePage
http://127.0.0.1:5000//api/tryChat
可以看到我这里使用了两个不同的端口，所有可以说基本可以满足大多数人的需求了。
在main.js文件中定义全局变量axios
Vue.prototype.$axios = axios
第二
我们通过我们所需调用的接口去改写config文件夹中的index.js文件
以我的为例子，先找到proxyTable，我们需要在这里去修改我们需要配置的跨域代理。
以我需要的接口为例进行配置代理，大家可以仿照我的例子来改。
重写请求地址那里大家如果是和我一样进行命名的话设不设置为空都差不多。
可以看到我是根据接口的地址来写这个配置的名称的，这样不容易出错，血的教训不然弄半天都还是不成功。
至于在dev.env.js文件和prod.env.js文件的配置如下，我试了不配重启vue项目也没问题依旧可以实现跨域。具体为啥没有深入研究，各位大大佬有知道的也可以指点一二。
dev.env.js
prod.env.js
第三
接下来就可以去对后端进行请求了，这是我写的例子。
这里只是总结跨域的书写与经验，其他就不过多展示了。这样一套操作下来基本就解决了大多数人的需求了，我也是试了很多次才实现的，我看网上大多的教程都很死板的，遂自我总结一下我的经验和方法。我自己觉得最好是取得名字和接口中的有所对应比较容易成功。
代码
当然啦，我还是准备了一下代码让大家可以直接cv ，方便快捷
'/articles': {
// websocket
ws: false,
// 目标地址
target: 'http://localhost:8081/',
//发送请求头host会被设置target
changeOrigin: true,
// 重写请求地址
pathReWrite: {
'^/articles': '/articles'
}
},
// prod.env.js
module.exports = {
NODE_ENV: '"production"',
api: '"//127.0.0.1:5000/"',
articles:'"//localhost:8081/"',
}
// dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
api: '"/api/"',
articles: '"/articles/"'
})好了，总结完毕，大家如果出现其他问题或者还是没看太懂的也可以问我，我一定会尽力解答，当然前提是我懂。
总结
到此这篇关于vue中前端代理跨域问题的文章就介绍到这了,更多相关vue前端代理跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VueCli3.0中集成MockApi的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vue3.3 + TS4构建实现ElementPlus功能的组件库示例
Vue.js 是目前最盛行的前端框架之一,而 TypeScript 则是一种静态类型言语,它能够让开发人员在编写代码时愈加平安和高效,本文将引见如何运用 Vue.js 3.3 和 TypeScript 4 构建一个自主打造媲美 ElementPlus 的组件库2023-10-10
这篇文章主要介绍了vue 路由跳转打开新窗口被浏览器拦截问题处理，下面文章操作中所遇到相关问题解决的内容介绍详细，需要的小伙伴可以参考一下2022-03-03
本期将会介绍 Vue 中的 watch 侦听器,它语法是怎么样的呢？具有怎样的功能呢？最后用模拟实现百度翻译来更进一步练习 watch 侦听器,需要的朋友可以参考下2024-11-11
本文介绍了在Vue项目中实现电子签名功能的步骤,包括将原始文档转换为图片、使用`signature_pad`和`html2canvas`库、调整签名位置和缩放比例、合并图片等步骤,并提供了完整的源码,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了如何封装Vue Element的table表格组件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-02-02
在我们开发中，经常要用到Vue.extend创建出Vue的子类来构造函数，通过new 得到子类的实例，然后通过$mount挂载到节点，今天通过本文给大家讲解手写vm.$mount方法 ，感兴趣的朋友一起看看吧2022-11-11
在本篇文章里小编给大家整理的是关于vue中使用rem布局代码详解知识点，需要的朋友们参考下。2019-10-10
这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
最新评论