浅谈跨域以及如何解决跨域

一、什么是跨域，为什么会出现跨域

跨域即跨域资源共享（CORS，Cross-Origin Resource Sharing），是浏览器端的同源策略对跨域资源请求的限制。同源策略是浏览器的一种安全机制，它规定网页脚本只能与‌同源‌（即协议、域名和端口完全相同）的资源进行交互，以防止恶意网站窃取用户敏感信息或进行非法操作。

二、跨域带来了什么好处

出现跨域是因为浏览器的同源策略导致的，那么浏览器遵循这一策略到底是为了什么呢，他有什么好处呢？

• 防止跨站脚本攻击（XSS）：同源策略阻止了一个网站通过脚本访问另一个网站的文档对象模型（DOM），这样即使一个网站被注入了恶意脚本，它也不能够获取或操作其他网站的数据。
• 保护用户凭据：例如Cookies通常用于存储用户的登录状态和其他敏感信息，同源策略确保这些信息只能被同一源的页面访问，防止了用户凭据被盗用的风险。
• 维护数据的隔离性：同源策略还保证了不同源之间的数据隔离，使得网站开发者能够更好地控制自己网站的数据，避免被其他网站滥用。
• 提升用户信任：用户在浏览网页时，同源策略的存在让用户更加信任他们的操作是在一个安全的环境下进行的，这有助于提升用户体验和对网络服务的信任度。
  促进资源的合理管理：通过限制不同源的资源访问，同源策略促使网站开发者合理规划和管理自己的资源，避免资源被不必要的访问消耗，提高了网站的性能和稳定性。

三、如何解决跨域

以下介绍几个常用到的解决跨域的方式

1、jsonP

利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。
前端：

后端：

2、CORS

在后端应用中，设置CORS响应头允许指定源访问资源

前端：

后端

3、反向代理

本地可使用webpack或者 vite设置反向代理，线上可使用NGINX实现反向代理
以下例子以webpack为例
前端配置devServer