javascript - 了解页面响应

Question

我试图了解整个 CORS 政策是如何运作的。为了解释我的困惑，让我举个例子:

$.get("https://www.google.com", function(response) { alert(response) });

上述请求将返回并出现以下错误:

XMLHttpRequest cannot load https://www.google.com/. Redirect from 'https://www.google.com/' to 'https://www.google.ca/?gfe_rd=cr&ei=TlqUWeGEH5HRXqW6utgI' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

现在为了使其发挥作用，谷歌必须将 https://fiddle.jshell.net 列入白名单.

现在，如果我在 Restful API 页面上尝试同样的事情，那就行了。我的问题很简单，为什么？

为了分析这一点，我尝试访问 API 并分析其响应:

https://apigee.com/console/bing?req=%7B%22resource%22%3A%22web_search%22%2C%22params%22%3A%7B%22query%22%3A%7B%22query%22%3A%22sushi%22%2C%22sources%22%3A%22web%22%7D%2C%22template%22%3A%7B%22format%22%3A%22json%22%7D%2C%22headers%22%3A%7B%7D%2C%22body%22%3A%7B%22attachmentFormat%22%3A%22mime%22%2C%22attachmentContentDisposition%22%3A%22form-data%22%7D%7D%2C%22verb%22%3A%22get%22%7D

回应:

HTTP/1.1 200
Date:
Wed, 16 Aug 2017 14:31:32 GMT
Content-Length: 266
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Server: Apigee Router
X-Content-Type-Options: nosniff

我得出的结论是它一定是标题。具体来说，我相信它是这个 header :Content-Type: application/json;但我不确定，我正在尝试理解这一点，并希望有人可以向我解释。

Answer 1

所以我做了 2 个测试:运行您的代码 $.get("https://www.google.com", function(response) {alert(response) }); 代码片段控制台并从 https://apigee.com/console/others 请求 https://www.google.com

我认为第一种情况发生的情况是请求是从客户端完成的，发送下一个请求 header :

:authority:www.google.com
:method:GET
:path:/?_=1502896196820
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8
origin:https://stackoverflow.com
referer:https://stackoverflow.com/questions/45717044/understanding-page-response
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3187.0 Safari/537.36
x-chrome-uma-enabled:1
x-client-data:CJG2yQEIo7bJAQiMmMoBCKudygEIs53KAQjRncoBCKiiygE=

由于 Google 没有回复 'Access-Control-Allow-Origin: *' - 客户端，并且在请求中我有 origin:https://stackoverflow.com code>，在我的例子中，Chrome 会抛出 CORS 错误。

在第二个测试中，使用 https://apigee.com/console/others并请求 https://www.google.com ，apigee.com 似乎会覆盖 header 并发送:

GET / HTTP/1.1
Host:
www.google.com
X-Target-URI:
https://www.google.com
Connection:
Keep-Alive

此外，从 DEV 控制台，我可以看到它进行服务器到服务器的调用，因此没有客户端参与抛出 CORS，因此我通过 Google 页面获得响应。

更新:

关于 JSON API 请求，这里有一些来自 Google CloudPlatform 的有趣信息关于CORS

Note: CORS configuration applies only to XML API requests. For JSON API requests, Cloud Storage returns the Access-Control-Allow-Origin header with the origin of the request.

因此，如果请求是从客户端执行的，则客户端不应抛出 CORS 错误，因为它获取的 Access-Control-Allow-Origin 与其发送的来源相同。

但是，不同的 API 和客户端可能会以不同的方式处理请求。因此，有时 Firefox 会抛出 CORS，而 Chrome 不会。