javascript - 为什么浏览器允许 xorigin POST 而不允许 PUT？

Question

考虑使用 XMLHttpRequest 的非常简单的示例。

以下帖子正确(您可以在网络选项卡中或通过将浏览器定向到 http://requestb.in/yckncpyc 来查看它)，尽管它会向控制台打印警告

XMLHttpRequest cannot load http://requestb.in/yckncpyc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

const method = "POST"
const req = new XMLHttpRequest()	
req.open(method, 'http://requestb.in/yckncpyc')
req.send("foobar")
console.log("sent")
req.addEventListener('load', function() { console.log(req.status, req.response) })

当然。我明白了。我不明白的是为什么仅仅将动词更改为 PUT 会导致完全不同的结果。发送的请求是一个 OPTIONS 预检请求并打印

XMLHttpRequest cannot load http://requestb.in/yckncpyc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

const method = "PUT"
const req = new XMLHttpRequest()	
req.open(method, 'http://requestb.in/yckncpyc')
req.send("foobar")
console.log("sent")
req.addEventListener('load', function() { console.log(req.status, req.response) })

为什么浏览器*以不同的方式对待这些？这似乎是为了安全而采取的措施，但这实际上没有任何意义，因为攻击者总是可以使用 POST 而不是 PUT。

那么这里的逻辑是什么？

• 在 Chrome 52、Safari 9.1.2 中尝试过此操作

Answer 1

GET、HEAD 和 POST 请求(带有一些其他限制)可以跨域，无需额外通信。无法检查响应，但允许请求。

任何其他操作都需要预检请求来检查目标站点的 header ，以查看是否允许该请求。

进行这种设置的原因是 GET、HEAD 和 POST 历来被浏览器允许作为 HTML 语义的自然部分。脚本、CSS 和图像的标签执行 GET 请求，表单执行 POST。因此，当引入 CORS 内容时，这些内容是允许的，前提是网站不会比在更简单的非 XHR 世界中更容易受到 XHR 世界中的简单请求的影响。

如此简单的请求是允许的，浏览器会查看响应头来决定是否允许跨域页面中的请求代码看到响应内容。对于其他请求，浏览器首先发送 OPTIONS 请求来检查 CORS 响应 header 。仅当看起来没问题(即，如果响应 header 包含适当的“yes that's OK” header )，才会允许 XHR 继续进行。