vue 使用 axios 跨域处理

Hrealm

于 2019-09-11 20:18:18 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

文章标签： vue axios

本文链接：https://blog.youkuaiyun.com/Realm_HuStar/article/details/100747780

在开发音乐网站FreeMusic时，遇到了跨域访问的问题。由于项目使用Vue.js和Axios，解决方法是在Vue配置文件中设置代理服务器。通过修改axios的proxy配置，可以避免浏览器的CORS限制，并在package.json中配置devServer代理，将本地请求映射到目标API。这样，在开发过程中，可以方便地进行跨域API调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个音乐网 FreeMusic （一个音乐网站，喜欢的可以看下谢谢）需要很多跨域访问的 API ，所以随之而来就是如何解决跨域问题同时还支持本地 API ，网上方法很多不过大部分会遭受 CORB ，或者需要在服务器端设置跨域。

因为这个项目采用的是 vue 框架 + axios 进行 http 请求，所以结合 vue + axios 进行跨域处理，先说说在服务器端设置跨域处理：

header(“Access-Control-Allow-Origin:*”); 
header(“Access-Control-Allow-Headers:content-type”); 
header(“Access-Control-Request-Method:GET,POST”);

服务器端设置跨域主要在于对请求头进行访问控制即可，很显然对于我本次访问的 API 是酷狗音乐的，我们无法操作服务器端。

结合 vue 里面的配置文件可以自己设置一个代理服务器，使用 proxyTable 进行配置，同时还可以配置本地 API&nbs

最低0.47元/天解锁文章

200万优质内容无限畅学