在前端开发中，浏览器的同源策略是一个非常重要的安全特性。它可以防止一个网站恶意地获取其他网站的数据。Chrome浏览器通过阻止不同源请求的方式来实现这个特性。
什么是同源策略？
同源策略是浏览器的一项安全策略，用于限制从一个源加载的文档或脚本如何与来自另一个源加载的资源进行交互。同源指的是协议、域名和端口号都相同。
换句话说，如果脚本来自于 A 网站，那么它只能操作属于 A 网站的内容。它不能读取或修改来自 B 网站的内容，或者向 B 网站发送请求。这就是同源策略的基本原理。
如何防止不同源请求
Chrome浏览器通过阻塞不同源请求来实现同源策略。当在浏览器中执行 JavaScript 代码时，如果代码试图向与当前页面不同源的服务器发送请求，浏览器将会拦截该请求。
举例来说，假设我们在页面中使用 Ajax 发送以下请求：
$.ajax({
url: 'http://www.example.com/data.json',
success: function(data) {
console.log(data);
}
});如果该请求的源与当前页面的源不同，Chrome浏览器会阻止该请求并抛出以下错误:
XMLHttpRequest cannot load http://www.example.com/data.json. No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是因为服务器在响应中没有包含跨域访问所需的 Access-Control-Allow-Origin 头部。
解决方法
要使不同源请求正常工作，需要满足两个条件：服务器必须允许跨域请求，浏览器必须支持跨域请求。
服务器端解决方案
对于服务器端来说，可以通过设置 HTTP 响应头的方式允许跨域请求。具体来说，需要在响应头中添加 Access-Control-Allow-Origin 字段指定允许跨域的源。例如：
Access-Control-Allow-Origin: *
这意味着服务器允许任何域都可以跨域访问该资源。如果希望限制允许跨域访问的源，可以将 * 替换为特定的域名。
客户端解决方案
对于客户端（即浏览器）来说，可以使用 CORS（跨源资源共享）机制来实现跨域请求。CORS 允许网页向不同的域请求资源，它使用额外的 HTTP 头来告诉浏览器哪些域是允许的。
在 JavaScript 中，我们可以使用 XMLHttpRequest 或 Fetch API 来发送跨域请求。对于 XMLHttpRequest，需要将 withCredentials 属性设置为 true，并在服务器响应中包含 Access-Control-Allow-Origin 头部。例如：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/data.json');
xhr.withCredentials = true;
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();这里的 withCredentials 属性告诉浏览器跨域请求需要包含凭证信息（如 cookies 和 HTTP 认证信息）。
总结
Chrome浏览器通过阻止不同源请求来实现同源策略，从而保护用户数据的安全。要使跨域请求正常工作，需要在服务器端添加 Access-Control-Allow-Origin 头部
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26034