跨域请求方式解读，看这篇就够了！

前端

2023-08-25 23:51:01

跨域请求：前端开发中的关键知识

什么是跨域请求？

跨域请求是一种在不同的域名、端口或协议之间发送HTTP请求的行为。想象一下，你正在一个网站上浏览，而该网站试图从另一个网站获取数据或执行操作。如果这两个网站不在同一个域下，那么就会触发一个跨域请求。

预检请求：浏览器如何处理跨域请求

为了防止恶意脚本攻击网站，浏览器在发送复杂跨域请求（即不符合特定条件的请求）之前，会先发送一个预检请求。预检请求使用OPTIONS方法，并且包含有关请求方法、请求头和请求来源的信息。

服务器收到预检请求后，将检查它是否被允许。如果允许，服务器将发送一个包含Access-Control-Allow-Origin头的响应，该头指定了允许发送实际请求的来源。如果不允许，服务器将返回一个403（禁止）响应，阻止请求。

简单请求与复杂请求

区分简单请求和复杂请求对于理解跨域请求至关重要。简单请求不会触发预检请求，因为它符合以下条件：

使用GET、HEAD、POST、PUT或DELETE方法
没有自定义HTTP头
请求体为空或只包含经过编码的数据

复杂请求不符合上述所有条件，因此会触发预检请求。

跨域请求的安全优势

预检请求机制为网站提供了防止恶意脚本攻击的额外安全层。通过阻止未经授权的脚本跨域发送复杂请求，浏览器可以保护用户的数据和网站的完整性。

作为一名Web开发人员，你需要知道的

了解跨域请求的机制对于Web开发人员来说至关重要。它可以帮助你：

避免跨域请求错误
确保网站的安全
实现不同域之间的通信

代码示例

以下是一个处理跨域请求的代码示例：

// 客户端代码
fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Error fetching data');
  }
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.log(error);
});

// 服务器代码
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the API!' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});