为何jQuery会出现Response for preflight is invalid (redirect)错误？

Hey there, let's break down exactly why this error is popping up for your AJAX request, and what you can do to fix it.

First, What's Causing This? #

This error is tied directly to CORS (Cross-Origin Resource Sharing)—the browser security mechanism that controls how web pages can request resources from a different domain.

Your code adds a custom Authorization header (for Basic Auth) to your GET request. When a request includes custom headers (or uses non-simple methods like PUT/DELETE), browsers automatically send a preflight OPTIONS request first. This is like the browser asking the target server: "Hey, is it okay if I send this actual request with these headers?"

The problem here is: the server is responding to that OPTIONS preflight request with a redirect (3xx status code). Browsers strictly follow CORS rules here—they won't automatically follow redirects for preflight requests, so they immediately throw this error instead of proceeding with your actual GET request.

Common Reasons This Happens With Your Code #

Looking at your AJAX setup, these are the most likely culprits:

• Your target URL is triggering a redirect (e.g., you used http:// but the server forces https://, or the path is missing a trailing slash and the server redirects to the corrected path).
• The server's CORS configuration isn't handling OPTIONS requests at all. Instead of returning a valid 200 OK response with CORS headers, it's redirecting the request elsewhere.
• If you're using Basic Auth, the server might be redirecting unauthenticated requests—but preflight OPTIONS requests don't include your Authorization header, so the server treats it as unauthenticated and redirects.

How to Fix It #

Here are actionable steps to resolve this:

1. Use the final redirected URL directly
   Check what redirect the server is sending (you can see this in Chrome's Network tab, under the OPTIONS request's "Response Headers"). If the server is redirecting to https://your-api.com/correct-path, update your AJAX url to use that final address instead of the original one.

2. Fix the server's CORS configuration
   Make sure the server properly handles OPTIONS preflight requests by returning these required headers:

   • Access-Control-Allow-Origin: Set this to your frontend's domain (e.g., http://localhost:8080—avoid using * in production if you're using auth, since * doesn't work with credentials).
   • Access-Control-Allow-Methods: Include GET (since that's the method you're using).
   • Access-Control-Allow-Headers: Must include Authorization to allow your custom auth header.
   • Access-Control-Max-Age: Optional but helpful—sets how long the browser can cache the preflight response (reduces repeated OPTIONS requests).

   For example, if you're using Nginx, you'd add something like this to your config:

   if ($request_method = OPTIONS) {
       add_header Access-Control-Allow-Origin http://your-frontend-domain.com;
       add_header Access-Control-Allow-Methods GET;
       add_header Access-Control-Allow-Headers Authorization;
       add_header Access-Control-Max-Age 3600;
       return 204;
   }
   

3. Ensure preflight requests aren't blocked/redirected by auth
   Since preflight OPTIONS requests don't include your Authorization header, your server shouldn't require auth for these requests. Adjust your server's auth rules to allow unauthenticated OPTIONS requests to the target endpoint.

Quick Check of Your Code #

Your AJAX code itself looks okay for sending Basic Auth, but double-check that btoa(username + ":" + password) is generating a valid base64 string (though this is unlikely to be the cause of the redirect error).

内容的提问来源于stack exchange，提问作者GUMMADI VIJAYA KUMAR