讲一下跨域的成因与方案：CORS、代理、JSONP、同源策略

[问答题]

讲一下跨域的成因与方案：CORS、代理、JSONP、同源策略细节。

秋水夏树

成因：浏览器同源策略。协议 / 域名 / 端口三者必须相同。 CORS：服务端设置响应头，Access-Allow-Control-Origin/Access-Allow-Control-Methods 等。非简单请求多一个 options 请求。代理：代理浏览器发送请求，代理服务器和浏览器同源。服务器和服务器间不存在同源策略。 JSONP：利用 script 标签可跨域，将 src 设为请求地址，封装一个全局函数，服务器返回的脚本调用该全局函数并将 data 作为参数。

发表于 2025-09-15 20:45:59 回复(0)

Crish07

成因：浏览器同源策略。协议、域名、端口号三者必须相同。不相同会限制 AJAX 请求、DOM 访问、Cookie, LocalStorage, IndexedDB无法读取或写入其他源的数据 - CORS（跨域资源共享）：允许服务器在 HTTP 响应头中添加一些字段，声明哪些外部资源有权限访问其资源，对于“非简单请求”，会先发送OPTIONS预检请求。这是 W3C 标准，也是目前解决跨域问题的主流和推荐方案。 - 代理（Proxy）：利用服务器之间通信不受同源策略限制的特点，前端不直接请求目标API，而是请求自己的同源服务器，再由这个服务器作为“代理”去请求真正目标的API - 开发环境：使用 webpack / vite 内置的代理功能 - 生产环境：使用 Nginx、Caddy 等配置反向代理 - JSONP：利用 script 标签可跨域，将 src 设为请求地址，封装一个全局函数，服务端返回的脚本调用全局函数并将 data 作为参数。但是只支持 GET 请求，容易遭受 XSS 攻击，仅在需要兼容非常古老的系统时才可能用到

发表于 2026-03-23 14:15:04 回复(0)

努力上岸的momo

源：协议、域名、端口号一致； jsonp：script标签的src不受同源策略的影响 cors跨域资源共享：在响应头添加access- control- allow- Origin字段代理：转发到同源服务器

发表于 2026-02-25 16:44:41 回复(0)

被发好人卡的回笼觉觉主很想run

同源策略是要求协议、域名、端口统一；

方法：CORS 通过设置响应头的ACCESS-CONTROL-ALLOW-ORIGIN,声明谁可以访问我；

PROXY设置代理服务器利用服务器之间没有同源策略限制实现资源共享；

JSONP利用scrip标签不受同源策略，但是只能用get，不安全

发表于 2026-03-11 11:16:12 回复(0)

已转码的钝角很开心

成因：浏览器同源策略。协议/域名/端口三者必须相同 CORS：服务端设置响应头，Access-Allow-Contorl-Origin/Access-Allow-Control-Methods等。非简单请求多一个options请求代理：代理浏览器发送请求，代理服务器和浏览器同源。服务器和服务器间不存在同源策略 JSONP：利用script标签可以跨域，将SRC设置为请求地址，封装一个全局函数，服务器返回的脚本调用该全局函数并将data作为参数

发表于 2026-02-22 15:33:23 回复(0)

WangYibo

【成因】：浏览器同源策略。协议/域名/端口，三者必须相同【CORS】：服务器端响应头，Access-Allow-Control-Origin/Access-Allow-Control-Methods,并非请求多一个options请求。【代理】：代理浏览器发送请求，代理服务器和浏览器同源，服务器和服务器间不存在同源策略【JSONP】：利用Script标签可以跨域，将SRC设置为请求地址，封装一个全局函数，服务器返回的脚本调用该全局函数并将data作为参数

发表于 2026-01-14 14:17:40 回复(0)

牛客41767380号

成因：浏览器同源策略协议/域名/端口三者必须相同 CORS：服务端设置请求头代理：通过代理服务器请求 JSONP：

发表于 2026-01-10 15:09:27 回复(0)

DRZv

同源策略（核心前提） - 定义：协议、域名、端口三者必须完全一致，否则为跨域； - 限制：阻止跨域读取Cookie、LocalStorage，禁止跨域AJAX请求等。 2. 跨域成因 - 前端页面与请求目标服务器的“协议/域名/端口”不一致，触发同源策略限制。 3. 核心解决方案 - CORS（主流）：后端配置响应头（如 Access-Control-Allow-Origin ），允许指定跨域源请求； - 代理（开发/生产常用）：通过同源服务器转发请求（如Webpack Dev Server代理、Nginx反向代理）； - JSONP（兼容旧浏览器）：利用

发表于 2025-11-03 06:56:02 回复(0)

提交观点

问题信息

来自：前端开发-牛客面经八股

难度：

8条回答 37收藏 823浏览

讲一下跨域的成因与方案：CORS、代理、JSONP、同源策略

问题信息

热门推荐

相关试题