跨域 浏览器同源策略限制同源协议 域名 (IP) 端口三者必须全部相同只要任意一个不一样就是跨域。注意跨域限制只存在于浏览器后端之间请求、Postman、curl、App 访问不存在跨域。一、产生跨域的几种场景举例假设当前页面地址https://a.com:8080表格请求地址是否跨域原因https://a.com:8080/api❌ 同域协议、域名、端口全部一致http://a.com:8080/api✅ 跨域协议不同http vs httpshttps://b.com:8080/api✅ 跨域域名不同https://a.com:9090/api✅ 跨域端口不同https://www.a.com:8080✅ 跨域子域名不同localhost 和 127.0.0.1 也是跨域一个域名一个 IP。二、两种 CORS 请求类型1. 简单请求不会发送 OPTIONS 预检满足全部条件请求方法GET/POST/HEAD请求头只能是Accept、Accept-Language、Content-Language、Content-Type (仅text/plain/multipart/form-data/application/x-www-form-urlencoded)浏览器直接发真实请求后端返回后浏览器校验响应头不通过则拦截。2. 预检请求 OPTIONS只要不满足简单请求浏览器先发一次 OPTIONS 预检请求询问服务器是否允许跨域预检通过才会发起真实请求。 触发预检常见场景请求方法PUT / DELETE / PATCH自定义请求头如token、AuthorizationContent-Type application/json开启凭证credentials: include就是Access-Control-Allow-Credentials3、服务器或后端框架跨域设置# 统一添加 CORS 头 add_header Access-Control-Allow-Origin $cors_origin always; add_header Access-Control-Allow-Credentials true always; add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS always; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,agentId always; # 处理 OPTIONS 预检请求 if ($request_method OPTIONS) { return 204; }Access-Control-Allow-Credentials决定了跨域请求能否携带凭证Credentials默认不携带凭证凭证包含了Cookie、HTTP 认证头如Authorization: Basic xxx、TLS 客户端证书。// ❌ 即使服务端允许前端不设置也不会携带 Cookie fetch(https://api.example.com/data); // ✅ 必须显式设置 fetch(https://api.example.com/data, { credentials: include });前端credentials的三个值值行为omit从不携带凭证默认值same-origin同源时携带跨域时不携带include跨域时也携带凭证注意1、即便跨域也会发起请求只是浏览器会拦截服务端的响应客户端无法获取到。2、后端设置Access-Control-Allow-Credentials: true时Access-Control-Allow-Origin不能为*。3、OPTIONS 预检请求后端必一般返回204。