本篇文章简单介绍一下同源策略与跨域
同源策略
同源策略是浏览器的一种安全策略，用于限制一个源的文档或脚本如何能与另一个源的资源进行交互。
同源策略的目的是防止恶意网站从用户的浏览器中窃取敏感信息或进行恶意攻击；用于保护浏览器用户的数据安全。
跨域
需要跨域请求的情况通常发生在以下场景：
- 前后端分离的开发模式：在前后端分离的开发模式中，前端代码和后端代码可能会部署在不同的服务器上，因此前端需要向不同的服务器请求数据，从而需要进行跨域请求。
- CDN加速：网站可能使用了CDN技术，将资源文件分布在不同的服务器上，从而提高网站的访问速度。但是，由于CDN服务器和原始服务器位于不同的域名下，因此需要进行跨域请求。
- 第三方服务接口：如果你的网站需要使用第三方服务提供的API接口来获取数据，那么很可能需要进行跨域请求。
总之，只要涉及到不同域名或者端口的请求，就有可能需要进行跨域请求。
需要注意的是，在使用跨域技术时，一定要注意安全问题，防止恶意攻击。同时，不同的跨域技术适用于不同的场景，需要根据实际情况进行选择。
在浏览器中进行跨域请求时，可以通过以下几种方法来解决跨域问题：
CORS（Cross Origin Resource Share跨域资源共享）
CORS是W3C标准，需要服务器端配合实现。 浏览器会自动发送一个预检请求（OPTIONS请求）来检查服务器是否允许跨域访问，如果允许则发送真正的请求。 服务器端需要在响应头中设置Access-Control-Allow-Origin等相关字段来告知浏览器允许的跨域访问。
下面是一个使用CORS解决跨域问题的示例代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
在这个示例代码中，我们使用了XMLHttpRequest对象来发送跨域请求，同时设置了withCredentials属性为true，以便在跨域请求中携带cookie信息。
服务端需要在响应头中设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials等相关字段来允许跨域请求，并允许携带cookie信息。
JSONP（JSON with Padding）
JSONP是一种通过动态创建script标签，实现跨域请求的方式。JSONP利用了script标签可以跨域访问的特性，通过指定callback参数，服务器端将返回数据包装成一个函数调用并返回给客户端，客户端再执行这个函数从而获取数据。
反向代理（Reverse Proxy)
反向代理是一种网络服务，它接受客户端的请求，并将请求转发给后端服务器，然后将后端服务器的响应返回给客户端。与正向代理相反，正向代理是客户端代理服务器发送请求，反向代理是服务器代理客户端的请求。
反向代理可以用于多种情况，例如：
- 负载均衡：反向代理可以将客户端请求分发到多个后端服务器上，从而平衡服务器的负载。
- 安全性：反向代理可以隐藏后端服务器的真实 IP 地址，从而提高服务器的安全性。
- 缓存：反向代理可以缓存静态资源，例如图片、样式文件等，从而减少服务器的负载。
常见的反向代理软件包括Nginx、Apache、HAProxy等。这些软件都具有高性能、高可靠性、高可定制性等特点，是构建高可用性和高性能系统的重要工具。
