#跨域与同源策略

#什么是跨域和同源策略

在浏览器中，出于安全性考虑，存在一个同源策略，他限制来自一个源的网页在无权限的情况下去访问另一个源的资源

同源有以下要求：

• 协议相同(https / http)
• 域名相同
• 端口相同

不满足以上任一条件的即为跨域

#为什么需要同源策略

是出于安全考虑，防止恶意网站窃取数据，例如跨站脚本攻击、跨站请求伪造等攻击。如果没有限制， 恶意网站就可以随意读取你在其它网站的敏感信息如cookie、localStorage、token等

同源策略只限制浏览器

#哪些操作会受到跨域限制

• xhr/fetch请求数据
• dom读取，iframe、window等跨域访问受限
• 通过canvas绘制跨域图片后读取像素
• 通过ajax读取跨域接口数据

#常见跨域

• 后端单独域名，前端访问

前端页面在https://example.com，后端api接口在https://api.example.com

• 端口不同

前端在443端口，后端在80端口，也算跨域

• 协议不同

页面是https，接口是http

#如何解决跨域限制

#CORS（跨域资源共享，cross-origin resource sharing）

• 原理：服务器在http响应头中添加相应字段，声明允许的跨域源

• 常见响应头：

  • access-control-allow-origin: https://example.com 允许的源，可以是 * 代表所有

  • access-control-allow-methods: GET,POST,PUT