回源302跟随

边缘函数回源302跟随功能适用于在资源获取过程中涉及到重定向的情况,可以帮助用户减少交互次数、提高访问速度提升您的用户体验。本文使用一个简单的回源302跟随使用示例,帮助您快速了解回源302跟随使用流程。

代码示例

说明

当客户端发起请求时,回源302跟随功能由源站响应并重定向。如果您的业务需要源站响应,例如您的源站突然负载太高,需要让其它源站服务器服务,建议您选择回源302功能。

  • 实现效果:在客户端发起请求时,如果源站返回的状态码为302,边缘节点将自动跟随重定向,并将重定向后请求的结果返回给客户端。

  • 语言类型Javascript

  • 代码示例

    /**
     * 自定义 fetch 函数,用于处理从客户端发起的请求。
     * 当从源站返回的状态码为 302(临时重定向)时,自动跟随重定向,
     * 并将重定向后请求的结果返回给客户端。
     * 客户端请求的示例URL:https://example.com/redirect
     * 重定向目标示例URL:https://example.com/target
     */
    export default {
      async fetch(request) {
        // 向边缘函数发起请求,并手动处理重定向
        // 使用 { redirect: "manual" } 选项,确保不会自动跟随重定向,
        // 从而可以手动处理响应状态码为 302 的情况
        const response = await    fetch(request, { redirect: "manual" });
        
        // 获取响应的状态码
        const status = response.status;
    
        // 如果源站响应状态码为 302(临时重定向)
        if (status === 302) {
          // 从响应头中获取重定向的目标地址
          const redirectLocation = response.headers.get("Location");
          
          // 向重定向的目标地址发起新的请求
          const res = await fetch(redirectLocation);
          
          // 返回重定向后请求的结果给客户端
          return res;
        }
    
        // 如果响应状态码不是 302,则直接返回边缘函数的响应
        return response;
      },
    };

部署效果

  • 响应结果为302

    边缘节点从响应头中读取Location得到https://example.com/target字段并发起新的请求,再将新请求的响应返回给客户端。客户端收到https://example.com/target的响应,不会感知到中间的重定向过程。

    Client requested URL: https://example.com/redirect
    //客户端请求的原始URL是 https://example.com/redirect。
    Redirecting from https://example.com/redirect to https://example.com/target
    //源站返回了302状态码,需要重定向到 https://example.com/target。
  • 响应结果不为302

    客户端直接收到边缘函数的响应内容。

    Client requested URL: https://example.com/redirect
    //客户端请求的原始URL是 https://example.com/redirect。