跨域问题及解决方案
这篇文章来解释一下什么是跨域以及如何解决跨域问题的三种方案。
一、什么是跨域
说到跨域，当然离不开同源策略，让我们先解释一下什么是同源策略。
1、同源策略
同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。可以实现：
- 保护用户隐私与安全：防止不同网站的脚本互相访问数据，这样可以防止恶意网站窃取敏感信息（如 cookies、session 信息等）。
- 跨域请求限制：浏览器会限制跨域的JavaScript代码进行访问，只允许请求同源的资源。否则会触发跨域错误。
2、同源和异源
如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。
即：源(origin) = 协议 + 主机名/域名 + 端口
下表给出了与 URL store.company.com/dir/page.ht… 的源进行对比的示例：
所以，当页面源和目标源一致时，为同源请求，否则为异源请求，即发生了跨域问题。
什么是跨域问题，总结为一句话就是：由于浏览器的同源策略限制，不同源之间的网页和脚本无法直接互相访问数据或资源。
值得注意的是，跨域是发生在浏览器端。
二、解决方案
1、CORS
原理：CORS是一种标准机制，它允许服务器通过添加特定的HTTP头部来指定哪些域名可以访问该服务器的资源。浏览器会根据服务器返回的CORS头信息，决定是否允许跨域请求。
常见配置：
Access-Control-Allow-Origin：指定允许访问资源的域名（例如：*表示允许所有域名访问，example.com表示只允许example.com访问）。
Access-Control-Allow-Methods：指定允许的HTTP方法（如GET、POST、PUT、DELETE等）。
Access-Control-Allow-Headers：指定允许的请求头（如Content-Type，Authorization等）。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
2、JSONP（仅支持GET请求）
原理：JSONP通过动态创建<script>标签并指定回调函数来绕过浏览器的同源策略。因为<script>标签不受同源策略限制，它可以跨域加载并执行外部的JavaScript文件，进而获取数据。
缺点：只能用于GET请求，且由于执行的是外部脚本，存在一定的安全风险。不推荐。
3、代理
原理：在开发过程中，通过将请求转发到同源服务器来绕过浏览器的跨域限制。代理服务器充当客户端和目标服务器之间的中介，避免直接跨域请求。
