如何跨域请求json数据

如何跨域请求JSON数据：从原理到实践的完整指南

在Web开发中，跨域请求是一个绕不开的话题，当前端页面需要从不同域名、端口或协议的后端服务获取JSON数据时，浏览器会因“同源策略”（Same-Origin Policy）的限制阻止请求，导致数据加载失败，本文将从跨域问题的根源出发，详解跨域请求JSON数据的多种解决方案，并附实践代码示例,助你轻松攻克这一技术难题。

什么是跨域？为什么需要跨域？

同源策略：浏览器的“安全护栏”

同源策略是浏览器核心的安全机制，要求协议、域名、端口三者完全相同，才允许页面之间共享资源（如Cookie、Ajax请求等）。

• https://www.example.com（源A）无法直接通过Ajax请求https://api.other-domain.com/data（源B）,因为域名不同；
• http://localhost:8080也无法直接请求https://localhost:3000,因为协议和端口均不同。

跨域场景的必然性

实际开发中,跨域请求极为常见：

• 前后端分离架构：前端项目部署在https://webapp.com，后端API部署在https://api.server.com；
• 第三方服务调用：如获取天气数据、支付接口、社交媒体内容等；
• 开发环境调试：前端本地开发（如localhost:8080）对接测试后端（如localhost:3001）。

跨域请求JSON数据的5种核心方案

CORS（跨域资源共享）——官方推荐的“标准解法”

CORS（Cross-Origin Resource Sharing）是W3C标准，通过HTTP头部让服务器声明哪些源可以访问资源，是浏览器支持的“官方跨域方案”。

原理：

浏览器在跨域请求时会自动添加Origin头部（如Origin: https://webapp.com），服务器根据Origin判断是否允许跨域，并通过响应头返回权限信息，若允许，浏览器则放行请求；否则拦截。

实现步骤：

服务器设置响应头 服务器需返回以下关键头部：

Access-Control-Allow-Origin: https://webapp.com  # 允许的源（*表示允许所有，但不推荐）
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  # 允许的请求方法
Access-Control-Allow-Headers: Content-Type, Authorization  # 允许的请求头
Access-Control-Allow-Credentials: true  # 是否允许携带Cookie（需配合前端withCredentials）

不同场景的配置示例

• Node.js（Express）：

  const express = require('express');
  const app = express();
  // 允许特定源跨域
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://webapp.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  // 处理预检请求（OPTIONS）
  app.options('/api/data', (req, res) => {
    res.send();
  });
  // 处理实际请求
  app.get('/api/data', (req, res) => {
    res.json({ message: '跨域成功！' });
  });
  app.listen(3000, () => console.log('Server running on port 3000'));

• Nginx反向代理：

  server {
    listen 80;
    server_name api.server.com;
    location / {
      # 允许前端域名跨域
      add_header 'Access-Control-Allow-Origin' 'https://webapp.com';
      add_header 'Access-Control-Allow-Methods' 'GET, POST';
      add_header 'Access-Control-Allow-Headers' 'Content-Type';
      proxy_pass http://localhost:3000; # 转发到后端服务
    }
  }

注意事项

• 简单请求（如GET、POST，且无自定义头部）会直接发送请求,无需预检；
• 非简单请求（如带Content-Type: application/json的POST，或自定义头部）会先发送OPTIONS预检请求,通过后再发送实际请求；
• 生产环境避免使用Access-Control-Allow-Origin: *，需指定具体源,防止安全风险。

JSONP（JSON with Padding）——兼容旧浏览器的“历史方案”

JSONP是一种非官方的跨域方案，利用<script>标签的“src属性不受同源策略限制”的特性实现。

原理：

前端定义回调函数（如handleResponse），通过<script>标签请求服务器接口，服务器返回一段调用该函数的JS代码（如handleResponse({data: '...'})）,浏览器执行后即可获取数据。

实现步骤：

前端代码

// 定义回调函数
function handleResponse(data) {
  console.log('获取数据：', data);
}
// 动态创建script标签
const script = document.createElement('script');
script.src = 'https://api.server.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器代码（Node.js）

app.get('/data', (req, res) => {
  const callback = req.query.callback; // 获取回调函数名
  const data = { message: 'JSONP跨域成功！' };
  res.send(`${callback}(${JSON.stringify(data)})`); // 返回调用回调的JS代码
});

缺点

• 仅支持GET请求,无法满足复杂场景；
• 安全风险：若服务器被恶意攻击，可能返回恶意JS代码（需确保接口可信）；
• 已逐渐被CORS取代,仅用于兼容IE8及以下等旧浏览器。

代理服务器——“中间人”转发的灵活解法

当前端无法直接修改后端服务器配置时，可通过代理服务器转发请求，实现“同源”通信。

原理：

前端请求同源代理接口，代理服务器再将请求转发到目标后端接口，最后将后端响应返回给前端，由于“前端-代理”和“代理-后端”均为同源请求,可绕过跨域限制。

实现方案：

开发环境代理（Vue CLI/ Create React App）

• Vue CLI：在vue.config.js中配置：

  module.exports = {
    devServer: {
      proxy: {
        '/api': { // 请求路径前缀
          target: 'https://api.server.com', // 目标后端地址
          changeOrigin: true, // 开启代理，修改请求头中的Origin
          pathRewrite: { // 重写路径（可选）
            '^/api': ''
          }
        }
      }
    }
  };

  前端请求/api/data会被代理到https://api.server.com/data。

• Create React App：在package.json中配置（需安装http-proxy-middleware）：

  "proxy": "https://api.server.com"

Nginx反向代理（生产环境）

server {
  listen 80;
  server_name webapp.com;
  location / {
    root /usr/share/nginx/html; # 前端静态资源
    index index.html;
  }
  location /api/ {
    proxy_pass https://api.server.com/; # 转发后端请求
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

优点

• 灵活性高,无需修改后端代码；
• 可统一管理跨域请求，便于添加鉴权、日志等功能。

WebSocket——全双工通信的“实时解法”

WebSocket是一种在单个TCP连接上进行全双工通信的协议，支持跨域，且适合实时数据传输（如聊天、股票行情）。

原理：

前端通过WebSocket API连接服务器，握手阶段通过Origin头部验证，握手成功后即可双向传输数据,不受同源策略限制。

实现步骤：

前端代码

const socket = new WebSocket('wss://api.server.com/ws');
socket.onopen = () => {
  console.log('WebSocket连接成功');
  socket.send('请求数据');
};
socket.onmessage = (event) => {
  console.log('收到数据：', JSON.parse(event.data));
};

服务器代码（Node.js + ws库）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3001 });
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('收到消息：', message);
    ws.send(JSON.stringify({ message: 'WebSocket跨域成功！' }));