为什么我能够从 javascript 控制台发送跨域 ajax 请求？答案

【问题标题】：Why am I able to send cross-domain ajax requests from the javascript console?为什么我能够从 javascript 控制台发送跨域 ajax 请求？
【发布时间】：2016-05-16 14:40:22
【问题描述】：

当我访问几乎所有网站时，例如 SO，如果我打开控制台，注入 jQuery 并向我在本地主机上运行的服务器发送跨域 ajax 请求，我怎么会收不到任何信息如我所料的错误？但是，如果我打开我自己编写的网页之一，并且它也在我的本地主机上运行（但在与服务器使用的端口不同的端口上），如果我尝试从控制台发送 ajax 请求我收到这条消息：

XMLHttpRequest cannot load https://localhost:10000/. Request header field My-First-Header is not allowed by Access-Control-Allow-Headers in preflight response.

ajax 请求如下：

$.ajax({
    type: 'POST',
    url: 'https://localhost:10000',
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }

})

需要明确的是，我的问题不是关于如何解决这个问题，而是为什么我什至能够从大多数其他网站发出跨域请求（不应该不允许吗？）。这些网站是否设置了某种机制来自动绕过限制？

请求标头：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:csrftoken=lxe5MaAlb9GC5lPGQpXtSj9HvCP0QhCz; PHPSESSID=uta0nlhlh8r1uimdklmt3v3ho1
Host:localhost:10000
Referer:http://stackoverflow.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

响应标头：

Content-Length:3
Content-Type:text/html
Date:Mon, 16 May 2016 06:29:03 GMT
Server:TwistedWeb/16.0.0

【问题讨论】：

开发者控制台很特别；浏览器知道你是代码的来源，因为它是你自己的浏览器，你应该可以做任何你想做的事情。
为什么我什至能够发出跨域请求....因为 xhr 就是这样做的。响应是请求的最终状态。我猜你误解了请求/响应......！
@Pointy 但为什么这在我的第一个示例中不起作用（当我从自己的网页发送请求时）？
@Jai 但是同源策略呢？ developer.mozilla.org/en-US/docs/Web/Security/…
您能否发布可以从您的服务器（从外部页面）成功获取的响应标头？使用网络选项卡查看请求和响应标头。

标签： javascript jquery ajax

【解决方案1】：

这里发生的事情似乎很明显：浏览器只是处理在控制台中键入的代码，而不是页面本身运行的代码。从哲学上讲，它会以这种方式工作。毕竟，同源策略的重点是防止 XSS 和 CSRF 攻击，如果用户打开控制台发送跨域请求，他们只是在攻击自己。

另一方面，有可能诱骗用户对自己执行 XSS。如果你去 Facebook 并打开控制台，Facebook 的代码会记录一条警告消息，告诉普通用户不要将未知代码粘贴到控制台中，因为它可能是恶意的。显然这是他们看到的问题。

【讨论】：

我也是这么想的，但是我仍然不明白为什么当我在本地主机上运行自己的网页尝试它时它不起作用？也就是说，如果我尝试从控制台发送 ajax，我会收到您可以在帖子中看到的错误消息

【解决方案2】：

这称为 CORS 请求。

默认情况下，大多数主要浏览器都会阻止所有跨域请求。您能够请求跨域的大多数门户服务都在响应中进行了特殊设置。如果您没有在 api 级别提供这些设置，那么您的 api 将被阻止跨域请求。

这些响应设置如下：响应头需要有 access-control-allow-origin 属性。 access-control-allow-origin 可以为全局级别的每个 api 服务指定 *。 access-control-allow-origin 可以为每个api服务分别指定具体的方法名..

【讨论】：

对不起，这并不能真正回答我的问题。我知道什么是 CORS 请求，并且我知道响应标头。但是，我的服务器显然没有发送这些标头，这就是为什么我想知道它为什么仍然有效。