什么是接口跨域
你有没有遇到过这种情况：本地写好一个网页，调用后台接口时浏览器突然报错，提示不允许访问？但后端明明返回了数据，接口也能在 Postman 里正常打开。这种“看得见拿不到”的尴尬，大概率就是跨域问题。
简单说，浏览器出于安全考虑，限制了从一个源（域名、协议、端口任一不同）向另一个源发起的请求。比如你的网页是 http://localhost:3000，而接口地址是 http://api.example.com:8080，这就构成了跨域。
为什么会触发跨域
浏览器的同源策略（Same-Origin Policy）是罪魁祸首。它本意是防止恶意网站偷偷读取你的银行账户数据，但也在合法场景下带来麻烦。比如你在公司开发前端页面，对接测试环境的接口，八成就会撞上这个机制。
注意，并不是所有跨域请求都被禁止。像 img、script、link 这些标签可以跨域加载资源，但 XMLHttpRequest 或 fetch 发起的数据请求就不行，除非服务器明确允许。
常见解决方案
最常用的解法是 CORS（跨域资源共享）。只需要后端在响应头中加上 Access-Control-Allow-Origin，告诉浏览器：“这个来源我信得过”。比如允许 localhost 访问：
Access-Control-Allow-Origin: http://localhost:3000如果想允许多个来源，就得动态判断 Origin 头再设置，不能直接写 *，否则带凭证的请求会失败。
开发阶段还有一个取巧办法：用代理。比如前端项目用 Webpack DevServer，可以在配置里加一段：
proxy: {
"/api": {
target: "http://api.example.com:8080",
changeOrigin: true,
pathRewrite: { "^/api" : "" }
}
}这样你发请求到 /api/user，会被自动转到目标地址，而浏览器只认当前域名，自然不跨域。
JSONP 还能用吗
老项目里可能见过 JSONP，利用 script 标签跨域能力来回调函数。虽然现在基本被 CORS 取代，但在一些不支持 CORS 的老旧系统或 CDN 场景下还能应急。不过它只支持 GET，且容易被注入恶意脚本，用的时候得小心。
实际调试小技巧
打开浏览器开发者工具，看 Network 选项卡里的请求头和响应头。重点查 Origin 是否正确，以及服务器有没有返回 Access-Control-Allow-* 相关字段。如果连请求都发不出去，可能是预检请求（OPTIONS）被拦了，这时候得让后端加上对应的方法和头部白名单。
跨域不是前端单方面能解决的问题，很多时候得拉上后端同事一起看日志、改配置。沟通时别只说“我这边不行”，把请求截图和错误信息一起发过去，效率高得多。