不玩心跳，跨域处理一招制敌！

前端

2024-02-07 20:16:32

揭秘跨域之谜：全面剖析跨域本质与应对之道

跨域问题，是网络开发中经常遇到的拦路虎，它阻止了浏览器脚本跨越不同的域名、协议或端口访问资源。这背后的安全策略旨在保护用户数据，防止恶意网站获取敏感信息。

一、跨域的本质

浏览器通过三个要素判断网页是否同源：

协议： 网页使用的传输协议（如 HTTP 或 HTTPS）必须相同。
域名： 网页所在的主机名（如 www.example.com）必须相同。
端口： 网页访问的端口号（如 80 或 443）必须相同。

当两个网页满足上述条件，浏览器将允许它们执行彼此的脚本。否则，它们会被视为异源，浏览器会禁止脚本跨域交互。

二、跨域解决方案

针对不同的场景，有多种跨域解决方案可供选择：

1. CORS（跨域资源共享）

CORS 是一种 W3C 标准，允许浏览器跨域请求资源。服务器端通过添加响应头，指定允许跨域请求的源域、请求方法和请求头等信息。

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type");

2. JSONP（JSON with Padding）

JSONP 是非官方的跨域解决方案，利用<script>标签可以跨域加载脚本的特性。客户端发送请求，请求服务器返回一个 JavaScript 函数调用，其中包含跨域数据。

<script>
$.getJSON("http://www.example.com/data.php?callback=myCallback",
function(data) {
    console.log(data);
});

function myCallback(data) {
    // 处理跨域数据
}
</script>

3. WebSocket

WebSocket 是一种双向通信协议，允许浏览器与服务器建立持续的连接，不受同源限制。它常用于构建实时应用程序。

4. AJAX 代理

AJAX 代理通过在服务器端架设一个代理服务器，来绕过同源限制。客户端向代理服务器发送请求，代理服务器再向目标服务器转发请求，并返回响应。

三、跨域处理实例

假设网站 A 要跨域访问网站 B 的资源，网站 B 服务器代码如下：

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

$data = array("name" => "John Doe", "age" => 30);

echo json_encode($data);

网站 A 客户端代码如下：

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com/data.php");
xhr.onload = function() {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();
</script>