JavaScript中如何进行跨域请求 - 问答

在 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 请求，且需要服务器端配合。

0 赞

0 踩