在 JavaScript 中,进行跨域请求通常需要使用 CORS(跨源资源共享)机制。CORS 需要服务器端的支持,服务器需要在响应头中添加允许跨域的头信息。以下是几种常见的 CORS 跨域请求方式:
- 简单请求:使用 GET、HEAD 或 POST 方法,且只允许安全上下文(即协议为 HTTPS、端口为 443 等)的请求。服务器在响应头中添加
Access-Control-Allow-Origin: *
即可。
示例代码:
fetch('https://example.com/api/data', { method: 'GET', }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
- 预检请求:对于除简单请求之外的其他请求,浏览器会先发送一个预检请求(OPTIONS 请求),询问服务器是否允许跨域。服务器需要在响应头中添加
Access-Control-Allow-Origin: *
和Access-Control-Allow-Methods
等头信息。
示例代码:
fetch('https://example.com/api/data', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ key: 'value' }), }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
服务器端需要添加如下响应头:
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type
除了 CORS 机制外,还可以使用 JSONP(JSON with Padding)方式进行跨域请求。但 JSONP 只支持 GET 请求,且需要服务器端配合。