JavaScript跨域受限源于浏览器同源策略,核心解决方案是后端配置CORS(含简单请求、带凭证请求及预检请求的响应头设置),开发期可用前端代理,无法改第三方接口时可服务端中转。
JavaScript 的跨域请求受限制,核心原因是浏览器的 同源策略(Same-Origin Policy)。它不是 JavaScript 本身的限制,而是浏览器为保障用户安全强制实施的一套规则:只有当协议(http/https)、域名(example.com)、端口(80/443)三者完全相同时,才允许脚本读取另一个页面的资源。一旦跨域,比如从 https://a.com 向 https://b.com/api 发起 AJAX 请求,浏览器会直接拦截响应(即使服务器已成功返回数据),防止恶意网站窃取用户在其他站点的敏感信息(如 Cookie、LocalStorage)。
CORS(Cross-Origin Resource Sharing)是目前最主流、最规范的跨域解决方案,本质是通过 HTTP 响应头让服务器“主动授权”哪些源可以访问它。
Access-Control-Allow-Origin: https://your-domain.com 或 *(注意:* 不支持携带凭证)Access-Control-Allow-Credentials: true,且 Access-Control-Allow-Origin 不能为 *,必须指定明确域名OPTIONS 请求,并设置 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头在本地开发时(如 Vue CLI、Vite、Webpack Dev Server),可通过配置代理把跨域请求“伪装”成本域请求,实际由开发服务器转发给目标接口。
vue.config.js 中配置 devServer.proxy,例如将 /api 开头的请求转到 https://api.example.com
vite.config.ts 的
server.proxy 中写类似规则当无法修改目标接口(比如调用第三方公开 API 但对方没开 CORS),可在自己后端写一个简单接口,由它去请求目标地址,再把结果返回给前端。相当于前端→你的服务器→第三方服务器,全程不跨域。
axios 或 node-fetch 轻松实现;PHP、Python 等也都有对应 HTTP 客户端JSONP 已基本淘汰(只支持 GET、无错误捕获、安全性差);postMessage 适用于 iframe 通信;WebSocket 协议本身不受同源策略限制;CORS 配合 credentials: 'include' 可传递 Cookie。现代项目优先选 CORS,开发期配代理,实在不行再走中转。
基本上就这些,不复杂但容易忽略细节——关键不在“能不能通”,而在“谁来决定能不能通”。浏览器守门,服务器开门,前端按规矩敲门。