前端的简单请求与非简单请求的区别及详解

前端

2024-02-18 00:06:51

前言

在前端开发中，跨域请求是一个常见的问题。跨域是指浏览器不允许从一个域名的网页向另一个域名的服务器发送请求。这主要是出于安全考虑，以防止恶意网站窃取用户数据。

跨域请求可以通过多种方式实现，其中最常见的是使用CORS（跨域资源共享）协议。CORS允许浏览器向其他域名的服务器发送请求，但需要服务器端的支持。

在CORS中，浏览器会首先向服务器发送一个预检请求（OPTIONS请求），以询问服务器是否允许跨域请求。如果服务器允许，浏览器才会发送实际的请求。

简单请求和非简单请求

CORS协议将请求分为简单请求和非简单请求。

简单请求是指满足以下所有条件的请求：

请求方法为GET、HEAD、POST
请求头只包含以下字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-Time
- Content-Type，但只限于以下三种取值：
  - application/x-www-form-urlencoded
  - multipart/form-data
  - text/plain
不发送任何自定义的HTTP请求头
请求中不包含任何数据体（如POST请求中的请求体）

非简单请求是指不满足上述所有条件的请求。

跨域请求的处理

对于简单请求，浏览器会自动发送预检请求，无需开发者的干预。对于非简单请求，浏览器会先发送预检请求，然后在得到服务器的允许后才发送实际的请求。

开发人员可以通过在服务器端配置CORS来允许跨域请求。常用的CORS配置有两种方式：

在HTTP响应头中添加CORS头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept

在web.config文件中配置CORS：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
            <add name="Access-Control-Allow-Headers" value="X-Requested-With, Content-Type, Accept" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

代码示例

以下是一个使用jQuery发送跨域请求的代码示例：

$.ajax({
    url: 'https://example.com/api/v1/users',
    type: 'GET',
    crossDomain: true,
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', 'Bearer <access_token>');
    },
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log(error);
    }
});

以下是一个使用axios发送跨域请求的代码示例：

axios.get('https://example.com/api/v1/users', {
    headers: {
        Authorization: 'Bearer <access_token>'
    }
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.log(error);
});