当后端无法配合修改响应头时，前端可在开发环境配置代理服务器转发请求，或对仅限 GET 的请求使用 JSONP 降级处理。生产环境建议通过 Nginx 反向代理解决，避免前端直接跨域调用接口。

快速处理思路

开发环境直接在构建工具中配置代理转发，生产环境通过 Nginx 将前端请求映射到后端接口域。JSONP 需要后端支持回调函数参数，若后端完全无法修改则不可用。

Vue 项目可在 vue.config.js 中配置 devServer.proxy，将/api 路径转发到后端地址。React 项目可在 package.json 中添加 proxy 字段或创建 setupProxy.js 文件。Nginx 配置需在 location 块中设置 proxy_pass 指向后端服务。

为什么会这样

跨域问题本质是浏览器的同源策略拦截了响应数据，而非请求未发送。服务器实际收到了请求并返回了数据，但浏览器检测到协议、域名或端口不一致时拒绝前端脚本读取响应。

同源策略要求协议、域名、端口三者完全一致。JSONP 利用 script 标签 src 属性不受同源限制的特性加载数据，代理服务器则通过同源请求转发绕过浏览器检测。

分步处理

第一步确认请求类型，若为 POST、PUT 等非 GET 请求，直接放弃 JSONP 方案，选择代理服务器方案。若为 GET 请求且后端支持回调参数，可尝试 JSONP。

第二步配置开发代理，Vue 项目在 vue.config.js 中设置 target 为后端接口地址，开启 changeOrigin 选项。React 项目通过 http-proxy-middleware 配置转发规则，匹配/api 前缀请求。

第三步部署生产代理，在 Nginx 配置文件中添加 location 块，将前端请求路径 proxy_pass 到后端服务地址，并设置 Host 和 X-real-ip 请求头。

怎么验证是否生效

打开浏览器开发者工具 Network 面板，发起请求后查看状态码是否为 200。确认 Console 面板没有 Blocked by CORS policy 红色报错信息。

检查响应数据是否成功渲染到页面，若使用 JSONP 需确认回调函数是否正确执行。代理方案需确认请求 URL 是否变为当前域名下的路径，而非直接请求后端域名。

常见坑

JSONP 仅支持 GET 请求，无法发送自定义请求头，且存在 XSS 安全风险，需信任服务端返回的脚本内容。开发环境代理配置仅在本地生效，打包后的生产代码不会携带代理配置。

Nginx 反向代理需注意 WebSocket 支持配置，若接口涉及长连接需额外设置 Upgrade 和 Connection 头。多服务器负载均衡场景下，简单代理配置可能无法适应动态后端地址。

常见问题

JSONP 能解决 POST 请求跨域吗

不能，JSONP 原理依赖 script 标签加载资源，浏览器限制 script 只能发起 GET 请求。

开发环境代理生产环境能用吗

不能用，webpack 或 vite 的 devServer 代理仅在本地开发服务器生效，生产包需配合 Nginx 或后端网关。

后端完全无法修改时有什么办法

若无法修改后端且不能用代理，仅 GET 请求可用 JSONP，其他情况需通过自建中间层服务转发请求。

参考来源

• 博客园 - 巨小婴 - 前后端分离产生的跨域问题的解决方案之`--jsonp`、nginx 代理、设置头信息等
• 前端解决跨域的方法（资料日期 2022 年 7 月 22 日）
• 处理跨域后端不配合怎么办？React 中用代理处理（搜索结果收录于 2021 年 1 月 2 日）
• 前端 三种解决跨域问题 jsonp、CORS、代理服务器 解决跨域全家桶（撰于 2023 年 12 月 12 日）
• 攻克跨域难题：CORS、JSONP 与代理服务器实操（2025 年 7 月 13 日的资料）
• 解决后端跨域问题的三种方案（该信息的时间戳是 2024 年 1 月 17 日）
• 前端跨域问题全解:JSONP、CORS 与代理服务器（来自 2024 年 11 月 11 日的资料）