为何XMLHttpRequest()需处理Access-Control-Allow-Origin而表单无此问题？

Great question! This difference boils down to how browsers enforce the Same-Origin Policy (SOP)—a core security rule that stops malicious scripts from accessing sensitive data from other domains. Let's break it down step by step:

1. What's the Same-Origin Policy, Anyway? #

The SOP is a browser security mechanism that restricts how scripts running on one origin (combination of protocol, domain, and port) can interact with resources from another origin. Its goal is to prevent scenarios like a random script reading your bank account data from a different domain.

2. Form Submissions: A "Safe" Navigation Action #

When you submit an HTML form to a cross-origin URL, here's what happens:

• The browser triggers a full page navigation to the target URL—think of it like clicking a link that takes you to a new page.
• The response from the cross-origin server loads directly into the browser's tab, but the original page's JavaScript cannot read or access that response content at all.
• Since there's no way for the original script to siphon off sensitive data from the response, browsers don't apply CORS checks here. They treat form submissions as user-initiated, intentional actions that don't pose a script-level security risk.

3. XMLHttpRequest (XHR)/Fetch: Script-Driven Data Access #

XHR and modern fetch() are different—they're designed to let scripts send requests and directly read the response data without navigating away from the page. This is powerful, but it also creates a security risk:

• If a script could freely send cross-origin requests and read responses, it could, for example, send a request to your email provider's API and steal your messages.
• To mitigate this, browsers enforce Cross-Origin Resource Sharing (CORS) rules for these requests. When you send an XHR/fetch request cross-origin:
  1. The browser automatically adds an Origin header to the request, telling the server which domain the request is coming from.
  2. The server must respond with an Access-Control-Allow-Origin header that either matches the requesting origin or uses a wildcard (*) to allow all origins.
  3. If the server doesn't return this header (or returns one that doesn't match), the browser blocks the script from accessing the response and throws the "Access-Control-Allow-Origin" error you're seeing.

The Key Takeaway #

The core difference is whether the initiating script can access the response data:

• Form submissions are navigation-based—scripts can't touch the response, so no CORS check is needed.
• XHR/fetch are script-driven data requests—scripts can read responses, so browsers require explicit permission from the server via CORS headers to keep users safe.

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