问题标签 [preflight]

我有一个 AspNet5 beta8 网站 mydomain.com:80 和在 mydomain.com:81 上运行的 api。只有端口不同。我确实配置了 Cors，它在 IE11 和 Chrome 中运行良好。不幸的是，我无法让它在 Firefox 42 版中运行。

不同之处在于 Firefox 在预检请求期间请求的内容类型：

api 在 OPTIONS 响应中用 json 回复。紧随其后的是

我假设是因为 Firefox 得到了 json 而不是 XML 并且生气了。

Chrome 和 IE11 都可以正常工作，因为它们在预检请求期间接受任何内容类型：

因为 AspNet5 默认不包含 XML 序列化器/格式化器，

我试图像这样将它添加到api中：

不幸的是，这不会导致 xml 响应来自 Firefox 的预检请求。Api 始终发送 json。我还尝试设置以下内容：

也没有运气......

如何强制 api 使用 xml 回复来自 Firefox 的预检请求或强制 Firefox 以编程方式在 OPTIONS 请求中请求 json（我在客户端使用 Angular）？

I follow the Node.js sample project (https://github.com/cloudinary/cloudinary_npm/tree/master/samples) to develop a simple web application that allows users to upload their profile picture. When I try to upload an image directly from the browser, I receive an error with the message shown below:

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloudname/auto/upload. The request was redirected to 'http://localhost:3000/cloudinary_cors.html?bytes=411&created_at=2015-11-23T…s=%23%3CSet%3A0x0000000c75f2e0%3E&type=upload&version=1448287679&width=175', which is disallowed for cross-origin requests that require preflight.

As described, the problem may be due to CORS support on the my node server, so I went back to my server code and made sure the cloudinary_cors.html can be found by the callback. I ran a test again and still I'm getting the same error. I managed to find the OPTIONS and POST request for uploading the photo from the console, and the POST request got back 302 (please find the attached response message for reference). However, the image can be found on the Cloudinary dashboard. How am I able to resolve this issue? Any input will be appreciated!

Remote Address:23.23.xxx.xxx:443 Request URL:https://api.cloudinary.com/v1_1/mycloudname/auto/upload Request Method:POST Status Code:302 Found Response Headers view source Access-Control-Allow-Methods:POST, GET, OPTIONS Access-Control-Allow-Origin:http://localhost:3000 Access-Control-Max-Age:1728000 Cache-Control:no-cache Connection:keep-alive Content-Length:840 Content-Type:text/html; charset=utf-8 Date:Mon, 23 Nov 2015 14:07:59 GMT Location:http://localhost:3000/cloudinary_cors.html?bytes=411&created_at=2015-11-23T14%3A07%3A59Z&delete_token=04963d1a6e5957ee8179c67879c0bc59241f7875fa3a29f430ee7ed942509ea7e0a302627a3b4927ea1cddb2ce2a4028e98d8130b363fdb27901c55a1edb0e9c73e88b027598f3ed1fcc55111ec618d5747d2a16ce80c4036b35d2b778ee81964e2c9014c5e4d796a04b0106f607b9af9bae058c76f4643ccbccaa4fda81968d4728427dfa0ae398fa8322c3760bee45e232336b0464fd0233313d082945e63878d137ddd98e77db9088b6835df8c0905e9e109e3df1add8da50c8b895e503b7&am... Server:cloudinary Status:302 Found X-Request-Id:5dae5c1d34551a10 X-UA-Compatible:IE=Edge,chrome=1 Request Headers view source Accept:/ Accept-Encoding:gzip, deflate Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4 Connection:keep-alive Content-Length:1197 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryhrzAgVFkPZMRAPo9 Host:api.cloudinary.com Origin:http://localhost:3000 Referer:http://localhost:3000/users/1234567 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 Request Payload ------WebKitFormBoundaryhrzAgVFkPZMRAPo9 Content-Disposition: form-data; name="timestamp"

下面的代码是我正在运行的。对我来说放轻松的代码风格......我是新人：p

我只是想从一台服务器上的 HTML 页面向另一台服务器上的 API 发出 Ajax GET 请求。我已经爬上了 CORS 山并获胜（这意味着我最初遇到了 CORS 错误，但已经解决了这个问题）。现在我得到了下面的例外。所以这是一个大问题：

使用 Swagger 定义全局 OPTIONS 处理程序以正确响应 Ajax Preflight 请求的正确方法是什么？

或者，如果我是一个完全的菜鸟......请告诉我我做错了什么。我真的很感谢这里的支持......这个让我很难过。

切断“您应该在同一台服务器上运行 HTML 和 Node”。响应... 为了正确扩展和保护您的 API，您应该与前端分开运行您的 API。在我的例子中，前端将是一个完整的 Web 应用程序和用于将视觉创造力与工程才华区分开来的 API。:)

这是场景...

客户端：任何 Web 服务器：使用 jQuery 1.6.2 的 Amazon Linux AMI 上的 Apache 内容：带有表单的简单 html 页面，使用 ajax 对我的 API 进行 GET 或 POST 调用 API 服务器：运行 Node Swagger Express 的 Amazon Linux AMI（更新为当前）行为：浏览到 HTML 页面单击提交按钮异常被打印到控制台

例外：

结果（由邮递员返回）：

标题（由邮递员返回）：

注意：由于异常，API 没有返回响应。

网页代码：

API 代码：app.js

ping.js

招摇的.yaml

默认.yaml

我需要添加一些常见的额外信息（需要与我们的大多数 http 请求一起发送）来跨域 http 请求，额外的数据是设备信息或位置信息之类的东西。我们目前正在为这些信息使用自定义 http 标头，但是自定义标头会使浏览器在真正的 http 请求之前发送预检请求，因此出于性能考虑，我们希望删除预检请求。我们首先考虑使用cookie，但是由于请求是跨域的，所以我们不能用javascript为我们的API的域设置cookie。然后我搜索了文档，根据Mozilla 文档：

特别是，在以下情况下会预检请求：

它使用 GET、HEAD 或 POST 以外的方法。此外，如果 POST 用于发送 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 的请求数据，例如，如果 POST 请求向服务器发送 XML 有效负载使用 application/xml 或 text/xml，然后预检请求。

它在请求中设置自定义标头（例如，请求使用诸如 X-PINGOTHER 之类的标头）

所以我想如果我使用一个很少使用的标准http头：“From”头，它不会触发选项请求。但是在我测试之后，我发现我错了，“From”标头仍然触发选项请求。

所以我有两个问题：

1. 为什么标准的 http 标头会触发预检请求？
2. 我应该如何在不触发预检请求的情况下发送额外信息？

任何帮助将不胜感激。

我有一个 webapp 分为两个应用程序：一个使用 Spring (4.2.3) 构建的 API 和一个使用 AngularJS (1.3.19) 构建的前端。这两个应用程序不在同一台服务器上，所以我正在努力处理跨源请求。当应用程序在 /articles 上使用 GET 等简单请求时，没问题。当应用程序使用带有 JSON 正文的 POST /articles 之类的预检请求时，我在 OPTIONS 请求上有一个 403，用于检查 POST 是否可行。

网页.xml：

CORSFilter.java：

请求标头：

• 访问控制请求标头：接受，内容类型
• 访问控制请求方法：POST
• 来源：http://localhost:9001

回复 ：

• 请求方法：选项
• 状态码：403 禁止

响应标头：

• 访问控制允许标头：接受，内容类型
• 访问控制允许方法：GET、POST、PUT、DELETE、OPTIONS
• 访问控制允许来源：http://localhost:9001

我也尝试使用 * 三个 Access-Control-Allow-X 的值，但仍然是同样的问题。我在 Chrome 和 Firefox 上遇到了这个问题。在 Safari 上，我有一个 403，但 POST 还是完成了。

我在互联网上找到的这个问题的所有答案都没有帮助我。我不知道为什么 OPTIONS 请求发回 403，在我看来，所有访问控制标头都设置为正确的值。

提前感谢您帮助我解决我几天来面临的问题。

[更新]如果我从 localhost:9000 上的 AngularJS 应用程序调用我在 localhost:8080 上的 API，它正在工作！但是当我从 localhost:9000 调用托管在 Heroku 上的 API 时，情况并非如此。Heroku 是否阻止了什么？

The title pretty much says it all. I know I can bypass it in my browser with --disable-web-security (for chrome) but how does it work for releasing the app? I have no access to the server that is set to deny reverse proxies and only accepts GET requests not OPTIONS this leads to prefight issues. How can I work around this?

I've taken a look at these but they don't seem to answer the prefight from release workaround. Any Suggestions/workarounds?

http://blog.ionic.io/handling-cors-issues-in-ionic/

https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/

我有一个 WebApi 项目的 angularjs HTML 客户端。当我通过 POSTMAN 或其他 REST 客户端测试 API 时，似乎一切正常。

当我开始使用带有 angularjs 客户端的浏览器时，浏览器总是使用 OPTIONS 启动预检请求。在那里，我的 WebAPI 总是回答 400 Bad Request - 我仍然处于“/api/token”阶段。

我已经将我的 WebAPI 项目的每一个点都附加到了调试器上。我还根据 SO 中关于如何启用 CORS 的几个答案更改了几点。其中一些我已经尝试过：更改 web.config 以在每个请求上添加启用 cors 的标头，将 cors 添加到 WebApi 启动，在“/token”覆盖的函数中启用 cors。

这是我得到的：

Angularjs TypeScript 调用“/api/token”：

这是在我的 WebApi 上调用的唯一函数：

如果我只是离开 OWIN Cors 的东西，添加标题并调用“context.Validated()”，一切都会继续。这是我得到的：

我真的很感激一些关于从哪里得到的想法。这对我来说是全新的，我确实操作了一些其他的 WebApi 项目 + angularjs。

乐问题：

我正在尝试通过跨域ajax 请求 (CORS)加载受基本身份验证保护的页面 (securePage.html)。

基本身份验证（自定义标头）+ CORS = preflight OPTIONS-Request！

尽管凭据是提供给实际请求的，但预检请求不会发送它们！

响应：401 未经授权！

401 Unauthorized 错误的快照

乐环境：

服务器：IIS 8.5 托管我的securePage.html。这是我的 web.config。

从我的本地 PC ( http://localhost:4444 ) 我发送 ajax 请求。

乐问：

显然授权规则没有做任何事情！为什么？我试过了：

没有成功！

这个问题有什么解决办法吗？我在这里错过了什么吗？

乐解决方案：

我希望这个问题不会太模糊，但我觉得我错过了一些基本的东西。这是我所处的情况。我们有一个胖客户端应用程序，它在每个用户的本地计算机（Windows 7）上运行，并提供一个 JavaScript API 来与应用程序交互。我们有一个托管在服务器上的 Web 应用程序，但向 localhost 发出 AJAX 请求以与厚客户端 JS API 交互。

在一台机器上，我们加载 Web 应用程序。向 localhost 发出的所有 AJAX 请求都是在没有 OPTIONS 预检请求的情况下发出的。JS 控制台的 net 选项卡显示正在发出的 POST，并且响应成功（我要告诉胖客户端响应中要包含哪些标头，包括所有必要的 CORS 标头）。

在另一台机器上，我们从同一台服务器加载 Web 应用程序。但是，当向 localhost 发出 AJAX 请求时，会发出（预期的）OPTIONS 请求。不幸的是，胖客户端没有响应适当的 Access-Control-Allow-Origin 标头，因此不允许进行后续 POST。

浏览器无关紧要，我们已经测试了最新版本的 Firefox 和 Chrome，并且我们总是从机器上获得相同的行为。我们已经在 4 台机器上进行了测试——2 台发送 OPTIONS，2 台只发送没有前面的 OPTIONS 的 POST。似乎 AJAX 目的地是否与来源不同以及它是否发送预检请求取决于浏览器。我终其一生都无法弄清楚为什么我的机器不发送任何 OPTIONS 请求，即使 AJAX 请求（到 localhost 或 lvh.me）与网页源的主机/域不同，但从另一台机器加载相同的页面确实会产生它们。

是否有某种浏览器设置会影响这一点？还是 Windows 设置？为什么我们会在这方面看到不同的行为？

更新1：

为了简化和澄清，我有两台机器，machineA 和 machineB。两台机器都从远程服务器 example.com 加载 Web 应用程序。两台机器都在其本地机器上安装了一个完整的厚应用程序，该应用程序提供 Web 服务器和 API。从 example.com 加载的 Web 应用程序包含用于向 localhost 提交 AJAX 请求的 JavaScript 代码，以便每个用户都可以与他们自己的胖客户端应用程序的本地实例进行交互。由于 localhost != example.com，请求应该被认为是跨域的。

当 machineA 向 localhost 提交标准的 jQuery AJAX 请求时（其中，POST 的有效负载只是“true”，这将导致胖客户端回显该值 - 仅用于轮询以确定胖客户端是否偶数可用），POST 是直接进行的，没有 OPTIONS 请求： POST http://localhost:4000/cgi-bin/Extensions/GeoLinkConsole/evaljs.html 200 OK 0ms 有趣的是，该 POST 的响应必须包括 Access-Control-带有 example.com 的 Allow-Origin 标头，以避免 CORS 错误。

当 machineB 从 example.com 加载相同的页面时，向 localhost 提交相同的标准 jQuery AJAX 请求，具有相同的“真实”有效负载，浏览器提交一个 OPTIONS 请求。这是我实际期望的行为。带有 200 OK 的 OPTIONS 请求响应，但是它不包含 Access-Control-Allow-Origin 标头，因此它会阻止 POST 通过。这不是我主要关心的问题，显然是胖客户端的问题。我最大的问题是为什么有些机器正在生成 OPTIONS 而有些则没有。我希望这有助于解释。

更新 2：

我包括两组请求标头。我不知道实际的请求标头会影响是否会生成 OPTIONS 请求。马上，我看到发送 OPTIONS 的那个包含另一个不包含的 Acces-Control-Request-Headers 和 Access-Control-Request_Method...

来自发送 POST 且没有 OPTIONS 的机器的请求标头：

来自发送 OPTIONS 的机器的请求标头：

此外，机器有一个“通用”标头块——我假设我刚刚发布的请求标头用于原始 POST 请求，这些与预检 OPTIONS 请求有关：

根据这里的样本：

如果请求使用 GET、HEAD 或 POST 以外的方法。此外，如果 POST 用于发送 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 的请求数据，例如，如果 POST 请求向服务器发送 XML 有效负载使用 application/xml 或 text/xml，然后预检请求。

因此，在以下示例中，由于 XML Content-Type 和自定义标头，执行了预检X-PINGOTHER：

但是在所谓的 pre-flight OPTIONS 请求中（下），只通知服务器 HTTP 方法和自定义 header。没有人告诉服务器关于XML Content-Type.

从逻辑上讲，只要发送了预检请求，就意味着Content -Type不是不需要预检的 3 种形式。但是还有许多其他的可能性。底线是，服务器应该能够知道为什么发送预检请求。

那么服务器如何合理地决定是否允许这个缺少拼图（内容类型）的请求呢？