ajax跨域问题

1.  跨域只存在于浏览器。
   是由于浏览器同源安全策略导致的（所以后端用postman访问告诉你没跨域时，别奇怪）
   同源策略（Same-Origin Policy, SOP） 是 浏览器 实施的一种安全机制，限制不同源的网页互相访问数据，防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。
   所谓同源是指协议、主机名、端口三者都必须相同:
   

   http://example.com:80 ✅ 与 http://example.com:80 同源
   https://example.com:80 ❌ 不同协议
   http://sub.example.com:80 ❌ 不同主机
   http://example.com:8080 ❌ 不同端口

2. 跨域发送预检请求（OPTIONS)问题
   
   • 只有 复杂请求（Non-Simple Requests）才会触发 预检请求（OPTIONS）。
   • 简单请求（Simple Requests） 不会 触发预检请求。
     

     什么是"简单请求"？

     1. 请求方法（Method） 只能是 GET、POST、HEAD
     2. 请求头（Headers） 只能是：
        • Accept
        • Accept-Language
        • Content-Language
        • Content-Type（但只能是 application/x-www-form-urlencoded、multipart/form-data、text/plain 之一）
     3. 请求不能使用 XMLHttpRequest 或 Fetch 的 credentials
        

     ✅ 如果不满足上面的条件，就会触发 OPTIONS 预检请求。

3. 服务端配置的 Header 头
   

   常见的 CORS 相关 Header：

   Header	作用
   Access-Control-Allow-Origin	允许访问的域，如 * 或 https://example.com
   Access-Control-Allow-Methods	允许的 HTTP 方法，如 GET, POST, PUT, DELETE
   Access-Control-Allow-Headers	允许的请求头，如 Content-Type, Authorization
   Access-Control-Allow-Credentials	是否允许携带 cookies，值为 true 或 false
   Access-Control-Max-Age	预检请求的缓存时间，减少 OPTIONS 请求

    注意：

   • Access-Control-Allow-Origin: * 不能和 Access-Control-Allow-Credentials: true 同时使用，否则浏览器会拒绝请求。
4. cookie问题
   

   cookie问题的总结
   当前端使用 fetch 或 XMLHttpRequest 进行跨域请求时，默认情况下不会携带 cookies，除非显式开启。

   可以在 fetch 或 XMLHttpRequest 请求中，设置 credentials: 'include'，让浏览器自动带上该域名下的 Cookie：

   fetch("https://api.example.com/data", {
     method: "GET",
     credentials: "include"  // 让浏览器携带跨域 Cookie
   })
   
   const xhr = new XMLHttpRequest();
   xhr.open("GET", "https://api.example.com/data", true);
   xhr.withCredentials = true; // 让浏览器携带跨域 Cookie
   xhr.send();

    

   注意：只有cookie同源时上述设置才能生效，否则设置了也是白搭
   为什么客户端无法读取 Set-Cookie？
   

   即使跨域请求成功，客户端的 JavaScript 依然无法直接访问 Set-Cookie，因为：

   1. Set-Cookie 不会出现在 CORS 允许的 Headers 里（即使 Access-Control-Allow-Headers 设置了也不行）。
   2. Set-Cookie 是 HTTP 头，浏览器自动处理，不允许 JavaScript 读取，以防止跨站脚本（XSS）攻击。
   3. Cookie 只能被浏览器自动携带，而无法通过 JavaScript 手动获取。