-
JSONP(JSON with Padding)
-
JSONP 是一种通过
<script>
标签的跨域请求方法,它依赖于服务器支持并返回特定格式的响应。 -
示例:
前端:
<script> function jsonpCallback(data) {console.log('Received data:', data); }var script = document.createElement('script'); script.src = 'https://api.example.com/data?callback=jsonpCallback'; document.body.appendChild(script); </script>
后端(假设):
// 伪代码,实际取决于后端技术 res.send(`jsonpCallback(${JSON.stringify(data)})`);
-
-
CORS(跨源资源共享)
- CORS 实际上是一种由服务器实现的跨域解决方案,但前端需要发送适当的请求头(如
Origin
),并检查响应头(如Access-Control-Allow-Origin
)以确认是否允许跨域。 - 前端:通常不需要做特别的事情,除非你需要发送预检请求(如使用
OPTIONS
方法)。 - 后端(Node.js/Express 示例):
const cors = require('cors');app.use(cors({origin: 'http://example.com', // 限制特定来源,或设置为 '*' 来允许任何来源optionsSuccessStatus: 200 // 某些遗留浏览器需要 }));app.get('/data', (req, res) => {res.json({ msg: 'This is CORS-enabled for a specific source' }); });
- CORS 实际上是一种由服务器实现的跨域解决方案,但前端需要发送适当的请求头(如
-
代理服务器
- 使用代理服务器(如 Nginx、Apache 或在开发环境中使用 Webpack DevServer、Node.js 代理等)来转发请求。
- Nginx 示例(配置部分):
location /api/ {proxy_pass http://api.example.com/;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade; }
- 在前端代码中,你可以像访问本地资源一样访问
/api/
路径,而 Nginx 会将其转发到实际的 API 服务器。
-
postMessage(对于不同窗口或框架)
- 如果你在控制两个不同的页面或框架(如 iframe),并且它们之间需要通信,可以使用
window.postMessage
方法。 - 示例:
// 在父页面 window.frames[0].postMessage('Hello, child!', '*');// 在子页面(iframe) window.addEventListener('message', function(event) {if (event.origin !== 'http://expected-origin.com') return;console.log('Message from parent:', event.data); }, false);
- 如果你在控制两个不同的页面或框架(如 iframe),并且它们之间需要通信,可以使用
-
WebSockets
- WebSockets 提供了一个全双工的通信渠道,但它本身不直接解决跨域问题。然而,WebSocket 服务器可以配置为接受来自任何源的连接,而前端则不需要担心同源策略。
- 注意:虽然 WebSocket 连接可以跨域,但初始的 HTTP 握手请求仍然受同源策略限制,除非服务器配置了 CORS。
在大多数情况下,CORS 是解决前端跨域问题的首选方法,因为它简单且标准。然而,在开发环境中,使用代理服务器(如 Webpack DevServer 的代理功能)也是一种非常流行且方便的方法。