vue 使用axios 出现跨域请求的两种解决方法
最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。
1:服务器端设置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
2:可以自己设置一个代理服务器,使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable :{} ,然后在里面加入
"/api":{ target: 'http://47.104.218.122:8087', changeOrigin: true, pathRewrite: { '^/api': '/' } }
注意这里面 /api是你自定义的,写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用‘^/api’代替target里面的地址,后面组件中我们调接口时直接用api代替 。比如我要调用’http://47.104.218.122:8087/dictionaryType‘,直接写‘/api/dictionaryType’即可。
然后我们可以在main.js设置一个基础路径,这样你调用接口的时候可以不写api,直接写/接口名称即可。在main.js 设置 axios.defaults.baseURL = ”/api”;
然后掉接口的时候可以直接写let _url4 = ”/dictionaryTypes”;这样就比较省事。
this.$axios.get(_url4) .then(response=>{ alert(response); alert(1); }) .catch(error=>{ console.log(error); })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)