🌐

跨域问题：一次性了解

什么是跨域？

CORS，全称 Cross-Origin Resource Sharing，中文常叫 跨源资源共享。

浏览器检查流程

notion image
notion image
浏览器发送预检请求之后，判断响应报文的 Origin /Methods /Headers 与前端的请求时候一致

同源（Origin）的判断标准

[协议]://[域名]:[端口]

上面三个元素只要有一个不同就不属于同源。

跨域问题是谁检测的？

浏览器，浏览器用于保护数据的一种方式。浏览器防止将后端的返回数据交给不安全的处理程序（JavaScript）。

如何避免（最佳实践）？

前端和 /api 同域部署：

使用 nginx(代理程序) 将 API 请求转发出去。
notion image
 

必须跨域情况：

严格使用
  • Origin：谁来访问我？【前端域名】
  • Allow-Origin：我允许谁访问？【白名单域名】
  • Allow-Methods：我允许哪些方法？【GET、PUT、POST 等】
  • Allow-Headers：我允许哪些请求头？【Content-Type, Authorization】
带登录状态：
  • Access-Control-Allow-Credentials: true
  • Allow-Origin 不能使用 *

排错方式

  • 1. 前端页面 Origin 是什么?（前端的域名）
  • 2. API 地址 Origin 是什么？（后端的域名）
  • 3. 是否真的跨域？ （是否协议、域名、端口一致）
  • 4. Network 里有没有 OPTIONS？ （预检请求）
  • 5. OPTIONS 返回状态码是多少？ (200\204 属于正常、其它不正常)
  • 6. OPTIONS 响应里有没有 Access-Control-Allow-Origin？ （预见响应报文，是否有这个配置）
  • 7. Allow-Origin 是否和当前 Origin 完全一致？ （这个配置是否和预期一致）
  • 8. 真实请求方法是否在 Access-Control-Allow-Methods 里？（正式请求）
  • 9. 真实请求 Header 是否在 Access-Control-Allow-Headers 里？ （正式请求）
  • 10. 是否携带 Cookie / Authorization？ （授权请求）
  • 11. 如果携带 Credentials，是否返回了 Access-Control-Allow-Credentials: true？
  • 12. 如果携带 Credentials，是否错误使用了 Allow-Origin: *？
  • 13. 真实请求响应是否也带 CORS Header？
  • 14. 是否发生了 301 / 302 重定向？ （不能出现重定向）
  • 15. 是否被 Nginx / 网关 / CDN 改写了响应头？ （保证只有一处进行配置）
  • 16. 是否错误地返回了多个 Access-Control-Allow-Origin？
  • 17. 错误响应、401、403、500 是否也带 CORS Header？（错误响应也需要包含）

详细内容

CORS 跨域根本性学习文档
 
GitHub