Vue基础教程（181）axios基本用法之跨域请求数据：别催了！axios跨域请求从入门到放弃，这份求生指南请收好

原创

于 2025-10-06 10:40:19 发布 · 1.7k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

一、为什么要跨域？同源策略的那些事儿

作为一名前端工程师，你一定遇到过这样的场景：本地开发时，你的Vue应用运行在http://localhost:8080，想要调用后端APIhttp://api.example.com/data，然后浏览器无情地抛出一个红色错误：

Access to XMLHttpRequest at 'http://api.example.com/data' from origin 'http://localhost:8080' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这时候你是不是很想对着屏幕大喊：“我只是想请求个数据，怎么这么难？！”

别急，这其实是浏览器在保护你。想象一下，如果没有同源策略，你刚在银行网站登录，然后不小心点开了一个恶意网站，这个恶意网站就能随意读取你的银行账户信息——这得多可怕？

同源策略（Same-Origin Policy） 就像小区的门禁系统：协议、域名、端口三者完全一致才算“同源”，才能自由访问。任何一项不同，都属于“跨域”，需要特殊许可。

当前页面URL	请求URL	是否同源	原因
http://localhost:8080	http://localhost:8080/api	是	完全一致
http://localhost:8080	https://localhost:8080/api	否	协议不同(https)
http://localhost:8080	http://localhost:3000/api	否	端口不同(3000)