什么时候应用同源策略?
When does the same-origin policy apply?
我对此感到非常困惑。当我几年前开始从事 Web 开发时,我记得 运行进入 SOP 阻止了我的请求。
然而,从那时起我就忘记了它并且 运行 多年来一直没有参与其中。我知道它仍然存在,但我可以在请求失败的情况下执行 $.ajax
或任何其他此类变体。我公司的页面通过多个框架向 3rd 方服务发出数十个请求,没有任何问题。
怎么回事?只是现代网络框架和库知道如何解决它,并为我处理它吗?也许是因为我多年没有手写 XMLHttpRequest
,所以我不再 运行 了? XMLHttpRequest
是否有一些选项,例如 origin
,可以解决这个问题?
基本规则
同源策略适用于从页面到不同于网页域(包括子域)的域的任何 HTTP 调用,但 GET 调用除外。
这意味着如果您将脚本标记添加到页面、加载图像或执行任何类型的使用 GET 方法的 HTTP 调用 - 那么您就没有问题。
另一方面,如果您尝试使用其他方法(例如 POST、PUT、DELETE 等)到另一个域,那么浏览器将阻止调用并抛出错误。
解决这个问题的方法
不过,您可以通过多种方式解决此问题。
第一种是使用 GET 调用,但让另一方将调用解释为其他内容。
一个很好的例子是称为 JSONP 的技术,我们在其中向页面添加脚本标记(这是一个 GET 调用)并且响应 GET 调用的服务器不 return 只是一个常规的 JS 脚本,而是 return 一个 "uniquely tailored" 响应,它引用原始页面上的代码来告诉它它有一个合适的响应。
有几种模式可以实现这一点,最常见的是 jQuery 中的模式,它是 GET 调用添加带有函数名称的查询参数的地方,returned脚本在全局范围内调用该函数。 jQuery 监听了该呼叫并做出了相应的响应。
要了解更多信息,请转到此答案:Confused on how a JSONP request works
外卡
解决这个问题的新方法,比 JSONp 更简洁的解决方案是 CORS,它是浏览器和 Web 服务器之间的一种契约。
本质上,浏览器将执行的操作(假设它支持 CORS,旧版浏览器不支持)是,浏览器不会完全阻止 "non GET" 调用,而是首先对 Web 服务器执行 OPTIONS 调用。 Web 服务器将查看请求并决定此客户端使用什么 "options"(也称为方法)与其通信。显然,默认只有一个选项:GET 调用,但您可以设置您的网络服务器以支持其他选项,例如 PUT、DELETE 等。
要了解有关 CORS 的更多信息,请查看 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
我对此感到非常困惑。当我几年前开始从事 Web 开发时,我记得 运行进入 SOP 阻止了我的请求。
然而,从那时起我就忘记了它并且 运行 多年来一直没有参与其中。我知道它仍然存在,但我可以在请求失败的情况下执行 $.ajax
或任何其他此类变体。我公司的页面通过多个框架向 3rd 方服务发出数十个请求,没有任何问题。
怎么回事?只是现代网络框架和库知道如何解决它,并为我处理它吗?也许是因为我多年没有手写 XMLHttpRequest
,所以我不再 运行 了? XMLHttpRequest
是否有一些选项,例如 origin
,可以解决这个问题?
基本规则
同源策略适用于从页面到不同于网页域(包括子域)的域的任何 HTTP 调用,但 GET 调用除外。
这意味着如果您将脚本标记添加到页面、加载图像或执行任何类型的使用 GET 方法的 HTTP 调用 - 那么您就没有问题。 另一方面,如果您尝试使用其他方法(例如 POST、PUT、DELETE 等)到另一个域,那么浏览器将阻止调用并抛出错误。
解决这个问题的方法
不过,您可以通过多种方式解决此问题。
第一种是使用 GET 调用,但让另一方将调用解释为其他内容。 一个很好的例子是称为 JSONP 的技术,我们在其中向页面添加脚本标记(这是一个 GET 调用)并且响应 GET 调用的服务器不 return 只是一个常规的 JS 脚本,而是 return 一个 "uniquely tailored" 响应,它引用原始页面上的代码来告诉它它有一个合适的响应。
有几种模式可以实现这一点,最常见的是 jQuery 中的模式,它是 GET 调用添加带有函数名称的查询参数的地方,returned脚本在全局范围内调用该函数。 jQuery 监听了该呼叫并做出了相应的响应。 要了解更多信息,请转到此答案:Confused on how a JSONP request works
外卡
解决这个问题的新方法,比 JSONp 更简洁的解决方案是 CORS,它是浏览器和 Web 服务器之间的一种契约。 本质上,浏览器将执行的操作(假设它支持 CORS,旧版浏览器不支持)是,浏览器不会完全阻止 "non GET" 调用,而是首先对 Web 服务器执行 OPTIONS 调用。 Web 服务器将查看请求并决定此客户端使用什么 "options"(也称为方法)与其通信。显然,默认只有一个选项:GET 调用,但您可以设置您的网络服务器以支持其他选项,例如 PUT、DELETE 等。 要了解有关 CORS 的更多信息,请查看 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS