Ajax请求实现跨域的方法及示例代码详解

原创 2025-06-16 10:17:20编程技术

338

在Web开发中，跨域请求是一个常见的问题。由于浏览器的同源策略限制，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。然而，在实际开发中，我们经常需要从不同的域名或端口获取数据，这就需要实现跨域请求。Ajax（Asynchronous JavaScript and XML）作为一种常用的前端技术，也需要解决跨域问题。本文将详细介绍Ajax请求实现跨域的几种方法，并提供示例代码。

一、跨域请求的基本概念

1.1 同源策略

同源策略是浏览器最核心也最基本的安全功能。它要求协议、域名、端口三者同时相同，才被认为是同源。如果请求的URL与当前页面的URL不同源，浏览器就会阻止该请求，这就是跨域请求的问题所在。

1.2 跨域请求的必要性

在实际开发中，我们经常需要从不同的域名或端口获取数据。例如，前端页面部署在http://example.com，而后端API部署在http://api.example.com。由于域名不同，直接发送Ajax请求会触发浏览器的同源策略限制，导致请求失败。因此，我们需要实现跨域请求来绕过这一限制。

二、Ajax请求实现跨域的方法

2.1 JSONP（JSON with Padding）

原理：JSONP是一种利用<script>标签不受同源策略限制的特性来实现跨域数据请求的技术。它通过动态创建一个<script>标签，并将其src属性设置为跨域API的URL，以获取数据。服务器响应的数据会被包装在回调函数中返回。

优点：

兼容性好，几乎所有浏览器都支持。
实现简单，无需服务器端配置。

缺点：

只支持GET请求，不支持POST、PUT等请求方法。
存在安全风险，如果不对加载的资源进行严格的过滤和校验，可能会导致XSS攻击。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP示例</title>
</head>
<body>
    <button onclick="loadData()">加载数据</button>
    <div id="result"></div>

    <script>
        function handleJsonpResponse(data) {
            document.getElementById('result').innerHTML = JSON.stringify(data);
        }

        function loadData() {
            var script = document.createElement('script');
            script.src = 'http://api.example.com/data?callback=handleJsonpResponse';
            document.head.appendChild(script);
        }
    </script>
</body>
</html>

服务器端代码（PHP示例）：

<?php
$data = array('key' => 'value');
$callback = $_GET['callback'];
echo $callback . '(' . json_encode($data) . ')';
?>

2.2 CORS（Cross-Origin Resource Sharing）

原理：CORS是一种通过服务器设置HTTP头来允许或限制跨域请求的技术。它允许服务器精确控制哪些源可以访问资源，以及允许哪些HTTP方法和头部字段。浏览器在发送跨域请求时，会自动添加Origin头部字段，服务器根据该字段判断是否允许跨域请求，并在响应头中添加Access-Control-Allow-Origin等字段来告知浏览器是否允许跨域。

优点：

支持所有类型的HTTP请求（GET、POST、PUT、DELETE等）。
更安全，可以限制跨域请求的类型和头部字段。
无需客户端特殊处理，与同源请求的代码完全相同。

缺点：

需要服务器端配置。
较老的浏览器可能不支持。

示例代码：

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS示例</title>
</head>
<body>
    <button onclick="sendRequest()">发送请求</button>
    <div id="result"></div>

    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://api.example.com/data', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerHTML = JSON.stringify(response);
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

服务器端代码（PHP示例）：

<?php
header('Access-Control-Allow-Origin: *'); // 允许所有源访问
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

$data = array('key' => 'value');
echo json_encode($data);
?>

2.3 代理服务器

原理：代理服务器是一种在客户端和目标服务器之间转发请求的技术。客户端向同源的代理服务器发送请求，代理服务器再将请求转发到目标服务器，并将响应返回给客户端。这样，客户端就不需要直接与目标服务器进行跨域通信。

优点：

可以避免直接在客户端处理跨域问题。
可以对请求进行处理或过滤，如添加认证信息、修改请求头等。

缺点：

增加了服务器的负担。
可能引入额外的网络延迟。

示例代码（使用Node.js和Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.use('/api', async (req, res) => {
    try {
        const response = await axios.get('http://api.example.com/data');
        res.json(response.data);
    } catch (error) {
        res.status(500).json({ error: '请求失败' });
    }
});

app.listen(3000, () => {
    console.log('代理服务器运行在 http://localhost:3000');
});

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理服务器示例</title>
</head>
<body>
    <button onclick="sendRequest()">发送请求</button>
    <div id="result"></div>

    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/api', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerHTML = JSON.stringify(response);
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

2.4 WebSocket

原理：WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。WebSocket允许服务器主动向客户端推送数据，实现了双向通信。

优点：

支持双向通信，服务器可以主动向客户端推送数据。
不受同源策略限制，可以实现跨域通信。

缺点：

需要服务器端支持WebSocket协议。
实现相对复杂，需要处理连接建立、消息收发等逻辑。

示例代码：

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket示例</title>
</head>
<body>
    <button onclick="connectWebSocket()">连接WebSocket</button>
    <div id="result"></div>

    <script>
        function connectWebSocket() {
            var socket = new WebSocket('wss://api.example.com/ws');

            socket.onopen = function() {
                console.log('WebSocket连接已建立');
                socket.send('Hello Server!');
            };

            socket.onmessage = function(event) {
                document.getElementById('result').innerHTML = event.data;
            };

            socket.onclose = function() {
                console.log('WebSocket连接已关闭');
            };

            socket.onerror = function(error) {
                console.log('WebSocket错误:', error);
            };
        }
    </script>
</body>
</html>

服务器端代码（Node.js和ws库示例）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('收到客户端消息:', message);
        ws.send('Hello Client!');
    });
});

console.log('WebSocket服务器运行在 ws://localhost:8080');