前端解决跨域的方案有哪些

前言

前后端分离与浏览器安全限制使得跨域成为前端开发绕不过的问题。目前跨域对开发最大的影响是本地开发请求服务器资源,生产环境多数已经通过CORS配置好。跨域是前后端对接数据的第一道坎,也是比较能考验web开发合作经验的一个问题。

什么是跨域(Cross-Origin)?

跨域(Cross-Origin)是指浏览器出于安全考虑,限制了来自不同 源(Origin) 的 JavaScript 代码访问资源的权限。

1. 什么是“同源”?

浏览器的 同源策略(Same-Origin Policy, SOP) 规定,只有当两个 URL 的 协议(Protocol)、域名(Domain)、端口(Port) 完全一致时,才属于同源,否则就是跨域。

URL A URL B 是否同源 原因
https://example.com https://example.com ✅ 同源 协议、域名、端口相同
https://example.com http://example.com ❌ 跨域 协议不同(HTTPS vs HTTP)
https://example.com https://api.example.com ❌ 跨域 子域名不同
https://example.com:80 https://example.com:443 ❌ 跨域 端口不同

2. 跨域的限制范围

跨域限制主要影响以下操作:

  • AJAX / Fetch 请求(XMLHttpRequest、axios、fetch API)
  • Web 字体(@font-face)
  • Canvas 绘制跨域图片
  • Web Storage / IndexedDB(部分浏览器限制)

但以下情况 不受跨域限制

你可能感兴趣的:(前端,面试,开发语言,javascript,学习)