全面解析多端请求API(含原生请求、第三方请求等)

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.wmcode.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

`Fetch`

Fetch 是一个现代、基于Promise的API，用于网络请求。它支持发送和接收各种类型的数据（如JSON、文本等），语法简洁且易于使用。

fetch('https://api.wmcode.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

第三方请求方式

Axios

Axios 是一个基于Promise的HTTP客户端，适用于浏览器和Node.js环境。它提供了许多便捷的功能，如拦截器、自动JSON数据转换、错误处理等。

axios.get('https://api.wmcode.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

WebSocket

WebSocket提供全双工通信渠道，允许服务器与客户端之间的实时、双向通信。

const socket = new WebSocket('wss://api.wmcode.com/socket');
socket.onmessage = function (event) {
    console.log('Message from server:', event.data);
};

Server-Sent Events (SSE)

SSE允许服务器主动向客户端发送更新，基于HTTP协议，但只能单向通信。

const eventSource = new EventSource('https://api.wmcode.com/events');
eventSource.onmessage = function (event) {
    console.log('New event:', event.data);
};

API测试软件

国外热门API测试软件

软件名称	特点	支持系统	是否免费	是否开源
Postman	功能强大，支持多种认证方式，适用于RESTful、SOAP等多种API类型的测试，协作功能出色，团队成员可以共享集合和环境。	Windows, macOS, Linux	免费版+付费版	否
Insomnia	界面简洁，易于上手，支持HTTP、REST、GraphQL、gRPC、SOAP或WebSockets请求，拥有多个开源插件，但免费版不支持团队协作和版本控制。	Windows, macOS, Linux	免费版+付费版	是
Paw	界面美观，支持JSON Schema，可以导入生成完全兼容的Swagger，但仅限Mac系统。	macOS	是	否
SoapUI	功能强大，专注于SOAP和REST API测试，提供功能测试、负载测试、安全测试等多种测试功能。	Windows, macOS, Linux	免费版+付费版	是
Swagger	自动生成API文档和测试代码，减少编写文档和测试代码的工作量，支持多种语言和框架。	浏览器	是	是
Katalon Studio	综合性的测试自动化解决方案，支持Web、API、移动和桌面应用的测试。	Windows, macOS, Linux	免费版+付费版	是
Talend API Tester	Chrome浏览器插件，专注于测试REST API，适合轻量级解决方案。	浏览器	是	是
ReadyAPI	企业级API测试工具，支持REST、SOAP和GraphQL，提供高级功能，如数据驱动测试、分布式测试和API监控。	Windows, macOS, Linux	付费版	否
Hoppscotch	免费、开源、轻量级的API工具，支持多种HTTP请求方法，具备环境变量、历史记录、导入/导出等功能，支持跨平台使用。	浏览器、桌面应用程序（Windows, macOS, Linux）	是	是

国内热门API测试软件

软件名称	特点	支持系统	是否免费	是否开源
Apifox	一站式API管理工具，集成API文档、调试、测试和Mock功能，支持团队协作、自动化测试和接口数据生成，界面友好，支持多种数据格式的导入。	Windows, macOS, Linux	免费	否
YApi	开源的API管理平台，专为前后端分离项目设计，接口管理、文档生成、权限控制和团队协作功能强大。	无限制	是	是
Rap2	基于Rap项目的升级版，提供API管理和文档生成，简单易用，适合中小型项目的API管理。	无限制	是	是
NEI (网易云)	由网易云提供的API管理工具，支持前后端协作，自动化文档生成、接口Mock和数据模拟。	无限制	免费	否
ShowDoc	专注于API文档和团队协作的工具，简洁易用，支持多人协作和权限管理。	无限制	免费	是

跨域问题

有了同源策略，厉害的请求都会被拦截！

CORS（后端允许跨域）

// Node.js/Express 示例
const cors = require('cors');
app.use(cors());

JSONP

function callback(data) {
    console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.wmcode.com/data?callback=callback';
document.head.appendChild(script);

代理服务器

// Webpack Dev Server 示例
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://api.wmcode.com',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }
};

解决跨域相关问题

2025新时代 | 分析并解决企业跨域问题-优快云博客

感谢阅读 | 更多内容尽在公棕号 wmcode