什么是跨域

理解浏览器的同源策略和跨域问题

问题

什么是跨域?为什么会出现跨域问题?

解答

跨域是浏览器基于同源策略的一种安全限制。

同源策略

同源策略(Same-origin policy)是浏览器最基本的安全功能。所谓同源,需要满足以下三个条件:

  • 协议相同(protocol)
  • 主机相同(host)
  • 端口相同(port)

什么情况下会跨域

当协议、主机、端口任意一项不同时,就会产生跨域。

例如:

// 同源
http://example.com:80/page1
http://example.com:80/page2

// 跨域 - 协议不同
http://example.com
https://example.com

// 跨域 - 主机不同
http://example.com
http://api.example.com

// 跨域 - 端口不同
http://example.com:80
http://example.com:8080

跨域是浏览器的限制

需要特别注意:跨域限制只存在于浏览器端。

使用抓包工具或 Postman 请求接口时,可以正常获取数据,因为它们不受浏览器同源策略的限制。实际上服务器已经返回了数据,只是浏览器阻止了 JavaScript 代码访问这些数据。

关键点

  • 跨域是浏览器的安全限制,不是服务器限制
  • 同源需要协议、主机、端口三者完全相同
  • 服务器会正常返回数据,但浏览器会拦截跨域响应
  • 非浏览器环境(如 Postman、Node.js)不存在跨域问题