如何用JavaScript获取重定向URL？解析RedirectDetective实现逻辑

Hey there! Let's break down your two questions step by step—first grabbing that final redirected URL, then diving into how Redirect Detective works under the hood with JavaScript.

Depending on whether you're working in a browser frontend or Node.js backend, there are tailored JavaScript solutions, though you'll need to account for browser CORS restrictions:

1. 浏览器前端方案（注意CORS限制） #

If the target URL is same-origin as your page, you can use fetch or XMLHttpRequest directly to get the final redirected URL:

// Using fetch (default behavior follows redirects)
fetch('https://www.example.com/random')
.then(response => {
  console.log('Final redirected URL:', response.url);
  // To track all redirect steps manually, set redirect: 'manual' and follow Location headers
})
.catch(err => console.error('Request failed:', err));

For cross-origin URLs, browser same-origin policy blocks direct requests. Your options here are:

• Build a simple Node.js proxy server to handle the request on the backend (bypasses CORS)
• Use a third-party CORS proxy (note: be cautious with security risks)

2. Node.js后端方案（无CORS限制） #

Node.js has no browser-origin restrictions, making it ideal for tracking redirects for any URL. Here are examples with the native https module and the popular axios library:

Native https module #

const https = require('https');

function getFinalRedirectUrl(url) {
  return new Promise((resolve, reject) => {
    const request = https.get(url, { followRedirect: false }, (response) => {
      const statusCode = response.statusCode;
      // Check if it's a redirect status code
      if (statusCode >= 300 && statusCode < 400 && response.headers.location) {
        // Convert relative Location paths to absolute URLs
        const nextUrl = new URL(response.headers.location, url).href;
        // Recursively track the next redirect
        getFinalRedirectUrl(nextUrl).then(resolve).catch(reject);
      } else {
        // No more redirects, return the current URL
        resolve(url);
      }
    });
    request.on('error', reject);
  });
}

// Usage example
getFinalRedirectUrl('https://www.example.com/random')
  .then(finalUrl => console.log('Final redirected URL:', finalUrl))
  .catch(err => console.error('Tracking failed:', err));

Axios library (more concise) #

const axios = require('axios');

async function getFinalRedirectUrl(url) {
  try {
    const response = await axios.get(url, {
      maxRedirects: 10, // Limit redirects to prevent infinite loops
      validateStatus: status => status < 400 // Allow 3xx status codes
    });
    return response.request.res.responseUrl; // Get the final URL
  } catch (err) {
    console.error('Tracking failed:', err);
    throw err;
  }
}

// Usage example
getFinalRedirectUrl('https://www.example.com/random')
  .then(finalUrl => console.log('Final redirected URL:', finalUrl));

Tools like Redirect Detective work by simulating HTTP request chains to track every redirect step. Their JavaScript implementation splits into frontend and backend components:

1. Core Logic: Backend Redirect Tracking (Node.js-focused) #

Since frontend browsers can't make cross-origin requests freely, the core heavy lifting happens on the backend:

• When a user enters a target URL, the frontend sends it to the backend API
• The backend initiates an HTTP request with followRedirect: false (disables automatic redirect following)
• It checks the response status code: if it's a 3xx series (301/302/307/308, etc.), extracts the Location header
• Converts relative Location paths to absolute URLs using the current request URL as a base
• Repeats the process until it gets a non-3xx response or hits a maximum redirect limit (to avoid infinite loops like A→B→A)
• Returns all redirect steps (URL, status code, Location header, latency, etc.) to the frontend as structured data

2. Frontend Interaction & Rendering #

The frontend handles user-facing tasks:

• Accepts user input and validates basic URL format (ensures it's a valid HTTP/HTTPS URL)
• Sends an AJAX request to the backend API to fetch redirect chain data
• Visualizes the data: displays each redirect step in a list, labels status code meanings (permanent vs. temporary redirects), shows latency, etc.
• Handles edge cases: shows error messages for unreachable URLs, redirect loops, or exceeded maximum redirect limits

Key Detail Handling #

• Loop Detection: The backend tracks visited URLs; if it encounters a URL already in the chain, it stops and alerts the user
• Relative URL Parsing: Uses new URL(relativePath, currentUrl) to ensure valid absolute URLs, preventing broken requests
• Status Code Differentiation: Highlights differences between 3xx codes (e.g., 301 is cached by browsers, 302 is temporary)
• Timeout Handling: Sets timeouts for each request to avoid hanging on unresponsive URLs

内容的提问来源于stack exchange，提问作者iLordOfAviation ROBLOX