Canvas跨域（CORS）在Chrome和Safari中失效问题求助

Let's break down why your setup works in Firefox but fails in Chrome and Safari, and walk through actionable fixes:

First, Let's Diagnose the Clues #

Your error messages reveal two key issues:

• Safari is blocking the request because it doesn't recognize https://www.example.com as an allowed origin.
• Chrome is reporting an origin of null—this is a red flag, usually tied to URL formatting issues or cached responses.

Step 1: Fix the URL Space Issue (Critical for Chrome) #

Look at your Chrome error: the image URL has a leading space (' https://mybucket.s3.amazonaws.com/bubble/foo.PNG '). This malformed URL causes Chrome to misinterpret the request origin as null, which is why only <AllowedOrigin>null</AllowedOrigin> worked.

Fix this by trimming whitespace from your source URL:

let myImage = new Image();
myImage.crossOrigin = 'anonymous'; // Use direct property assignment instead of setAttribute (more reliable)
myImage.src = thisDocument.url.trim(); // Remove extra spaces

Step 2: Clear Browser Cache & Force Refresh #

Chrome and Safari aggressively cache cross-origin response headers. Even if you updated your S3 CORS rules, old cached headers might still be blocking requests:

• Chrome: Press Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows) to force a full refresh, or enable "Disable Cache" in the Network tab of DevTools.
• Safari: Hold Cmd+Shift+R to refresh, or check "Disable Cache" in the Develop menu's Web Inspector.

Step 3: Ensure S3 CORS Rules Are Fully Applied #

AWS S3 doesn't apply CORS changes instantly—they can take 5-15 minutes to propagate. Let's verify your configuration and test with a permissive setup first:

1. Temporarily update your S3 CORS config to allow all origins (you can lock it down later once it works):

   <?xml version="1.0" encoding="UTF-8"?>
   <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
   <CORSRule>
       <AllowedOrigin>*</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>
   

2. Wait 10-15 minutes, then test again.
3. Use DevTools' Network tab to check the response headers for your image request—you should see Access-Control-Allow-Origin: * (or your specific domain once you revert the config).

Step 4: Verify Your Page's Actual Origin #

Chrome's Origin: null error suggests your test page might not actually be hosted at https://www.example.com (e.g., you're opening it locally via file://). Confirm your page's origin by running window.origin in the browser console—it should match exactly what's in your S3 CORS rules (including https:// or http://).

Step 5: Safari-Specific Tweaks #

Safari has stricter CORS enforcement. Try these adjustments:

• Ensure your S3 response doesn't include Access-Control-Allow-Credentials: true (since you're using anonymous mode, credentials aren't needed).
• Add an ExposeHeader to your S3 CORS rule (Safari sometimes requires explicit header exposure even for standard requests):

  <CORSRule>
      <AllowedOrigin>https://www.example.com</AllowedOrigin>
      <AllowedOrigin>http://www.example.com</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedHeader>*</AllowedHeader>
      <ExposeHeader>ETag</ExposeHeader> <!-- Add this line -->
  </CORSRule>
  

Step 6: Check for CDN Caching (If Applicable) #

If you're using CloudFront or another CDN with your S3 bucket, it might be caching old response headers. Clear the CDN cache after updating your S3 CORS rules to ensure the new headers are served.

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