我正在构建一个web API。我发现每当我使用Chrome POST, GET到我的API,总是有一个选项请求发送之前的真正的请求,这是相当恼人的。目前,我让服务器忽略任何OPTIONS请求。现在我的问题是,发送一个OPTIONS请求来增加服务器的负载有什么好处呢?有没有办法完全停止浏览器发送OPTIONS请求?
编辑2018-09-13:在这个响应的末尾增加了关于这个飞行前请求以及如何避免它的一些精度。
OPTIONS请求是我们在跨源资源共享(CORS)中所谓的飞行前请求。
当您在特定情况下跨不同来源提出请求时,它们是必要的。
某些浏览器会发出这种预运行请求,作为一种安全措施,以确保正在执行的请求是受服务器信任的。 这意味着服务器理解在请求上发送的方法、源和头是安全的。
当您试图执行跨源请求时,您的服务器不应该忽略这些请求,而是应该处理这些请求。
好的资源可以在这里找到http://enable-cors.org/
处理这些问题的一种方法是确保对于任何具有OPTIONS方法的路径,服务器都会发送带有此报头的响应
Access-Control-Allow-Origin: *
这将告诉浏览器服务器愿意回答来自任何来源的请求。
有关如何向服务器添加CORS支持的详细信息,请参阅以下流程图
http://www.html5rocks.com/static/images/cors_server_flowchart.png
编辑2018-09-13
CORS OPTIONS请求仅在某些情况下被触发,如MDN文档中所解释的:
Some requests don’t trigger a CORS preflight. Those are called “simple requests” in this article, though the Fetch spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a CORS preflight—a so-called “simple request”—is one that meets all the following conditions: The only allowed methods are: GET HEAD POST Apart from the headers set automatically by the user agent (for example, Connection, User-Agent, or any of the other headers with names defined in the Fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the Fetch spec defines as being a “CORS-safelisted request-header”, which are: Accept Accept-Language Content-Language Content-Type (but note the additional requirements below) DPR Downlink Save-Data Viewport-Width Width The only allowed values for the Content-Type header are: application/x-www-form-urlencoded multipart/form-data text/plain No event listeners are registered on any XMLHttpRequestUpload object used in the request; these are accessed using the XMLHttpRequest.upload property. No ReadableStream object is used in the request.
是的,有可能避免期权请求。选项请求是一个飞行前请求,当你发送(post)任何数据到另一个域。这是浏览器安全问题。但是我们可以使用另一种技术:iframe传输层。我强烈建议您忘记任何CORS配置,并使用现成的解决方案,它将在任何地方工作。
看看这里: https://github.com/jpillora/xdomain
工作示例: http://jpillora.com/xdomain/
关于飞行前OPTIONS请求的实际需求,请参考以下答案:CORS -引入飞行前请求的动机是什么?
要禁用OPTIONS请求,ajax请求必须满足以下条件:
请求不设置自定义HTTP报头,如'application/xml'或'application/json'等 请求方法必须是GET、HEAD或POST中的一个。如果是POST,内容类型应该是application/x-www-form-urlencoded、multipart/form-data或text/plain
参考: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
在之前的文章中已经提到过,OPTIONS请求的存在是有原因的。如果您的服务器响应时间过长(例如海外连接),您也可以让浏览器缓存飞行前请求。
让你的服务器用Access-Control-Max-Age报头来回复,对于到达同一端点的请求,preflight请求将被缓存,不再发生。
我已经解决了这个问题。
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS' && ENV == 'devel') {
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header("HTTP/1.1 200 OK");
die();
}
这只是为了发展。这样我就可以等待9毫秒和500毫秒,而不是8秒和500毫秒。我可以这样做,因为生产JS应用程序将在同一台机器上生产,所以没有选项,但开发是我的本地。
已经讨论过这个问题,下面是我对这个问题的结论和我的解决方案。
根据CORS策略(强烈建议您阅读它),如果浏览器认为它需要停止发送OPTIONS请求,您不能仅仅强制浏览器停止发送OPTIONS请求。
有两种方法可以解决这个问题:
确保你的请求是“简单请求” 设置OPTIONS请求的Access-Control-Max-Age
简单的请求
一个简单的跨站点请求是一个满足以下所有条件的请求:
唯一允许的方法是:
得到 头 帖子
除了由用户代理(例如Connection, user - agent等)自动设置的头信息外,允许手动设置的头信息有:
接受 接收语言 内容语言 内容类型
Content-Type头唯一允许的值是:
应用程序/ x-www-form-urlencoded 多部分/格式 文本/平原
简单的请求不会引起飞行前选项请求。
为OPTIONS检查设置缓存
您可以为OPTIONS请求设置Access-Control-Max-Age,以便它在过期之前不会再次检查权限。
Access-Control-Max-Age给出了在不发送另一个preflight请求的情况下,对preflight请求的响应可以缓存的时间(以秒为单位)。
限制指出
对于Chrome, Access-Control-Max-Age的最大秒数是600,也就是10分钟,根据Chrome源代码 Access-Control-Max-Age每次只对一个资源有效,例如URL路径相同的GET请求,但不同的查询将被视为不同的资源。因此,对第二个资源的请求仍然会触发预飞行请求。
对于一个理解它存在的原因,但需要访问一个没有认证就不能处理OPTIONS调用的API的开发人员,我需要一个临时的答案,这样我就可以在本地开发,直到API所有者添加适当的SPA CORS支持或我获得一个代理API并运行。
我发现你可以在Mac电脑的Safari和Chrome浏览器中禁用CORS。
在Chrome中禁用同源策略
Chrome:退出Chrome,打开终端并粘贴如下命令:open /Applications/谷歌\ Chrome。App——args——disable-web-security——user-data-dir
Safari:禁用Safari中的同源策略
如果你想在Safari上禁用同源策略(我有9.1.1),那么你只需要启用开发人员菜单,并从开发菜单中选择“禁用跨源限制”。
对我有用的是导入“github.com/gorilla/handlers”,然后这样使用它:
router := mux.NewRouter()
router.HandleFunc("/config", getConfig).Methods("GET")
router.HandleFunc("/config/emcServer", createEmcServers).Methods("POST")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
log.Fatal(http.ListenAndServe(":" + webServicePort, handlers.CORS(originsOk, headersOk, methodsOk)(router)))
一旦我执行了Ajax POST请求并将JSON数据附加到它,Chrome总是会添加内容类型头,这不是在我以前的AllowedHeaders配置。
我以前用过的一个解决方案——假设你的网站在mydomain.com上,你需要向foreigndomain.com发送一个ajax请求
配置IIS重写从您的域到外部域-例如。
<rewrite>
<rules>
<rule name="ForeignRewrite" stopProcessing="true">
<match url="^api/v1/(.*)$" />
<action type="Rewrite" url="https://foreigndomain.com/{R:1}" />
</rule>
</rules>
</rewrite>
在你的mydomain.com网站上-你可以进行同源请求,不需要任何选项请求:)
在花了一整天半的时间试图解决类似的问题后,我发现这与IIS有关。
我的Web API项目是这样建立的:
// WebApiConfig.cs
public static void Register(HttpConfiguration config)
{
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
//...
}
我在网上没有CORS特定的配置选项。配置>系统。webServer节点,就像我在很多帖子中看到的那样
全局中没有特定于CORS的代码。Asax或在控制器中作为装饰器
问题在于应用程序池设置。
托管管道模式被设置为经典(更改为集成),标识被设置为网络服务(更改为ApplicationPoolIdentity)
更改这些设置(并刷新应用程序池)为我解决了这个问题。
在使用代理拦截请求并写入适当的标头的情况下,可以解决这个问题。 在Varnish的特殊情况下,这些将是规则:
if (req.http.host == "CUSTOM_URL" ) {
set resp.http.Access-Control-Allow-Origin = "*";
if (req.method == "OPTIONS") {
set resp.http.Access-Control-Max-Age = "1728000";
set resp.http.Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, PATCH, OPTIONS";
set resp.http.Access-Control-Allow-Headers = "Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since";
set resp.http.Content-Length = "0";
set resp.http.Content-Type = "text/plain charset=UTF-8";
set resp.status = 204;
}
}
OPTIONS请求是web浏览器的一个特性,所以要禁用它并不容易。但我找到了用代理转移的方法。如果服务端点还不能处理CORS/OPTIONS,可能还在开发中,或者配置错误,那么它就很有用。
步骤:
使用工具(nginx, YARP,…)为这些请求设置反向代理。 创建一个端点来处理OPTIONS请求。创建一个普通的空端点可能更容易,并确保它能很好地处理CORS。 为代理配置两组规则。一种是将所有OPTIONS请求路由到上面的虚拟端点。另一个是将所有其他请求路由到实际的问题端点。 更新网站以使用代理代替。
基本上这种方法是欺骗浏览器,选项请求工作。考虑到CORS并不是为了加强安全,而是为了放松同源政策,我希望这招能管用一段时间。:)
你也可以使用API管理器(如开源的Gravitee.io)通过在preflight中操作头来防止前端应用程序和后端服务之间的CORS问题。
用于响应preflight请求的报头,以指示在发出实际请求时可以使用哪些HTTP报头:
内容类型 access-control-allow-header 授权 x-requested-with
并指定"allow-origin" = localhost:4200
推荐文章
- 如何使HTTP请求在PHP和不等待响应
- PATCH和PUT请求的主要区别是什么?
- Access-Control-Allow-Origin不允许Origin < Origin >
- 我可以把我所有的http://链接都改成//吗?
- URL为AJAX请求编码一个jQuery字符串
- 如何获得跨源资源共享(CORS)后请求工作
- 编译System.Net.HttpClient的查询字符串
- 摘要认证和基本认证的区别是什么?
- Axios -删除请求与请求体和头?
- 在Firebase的云功能中启用CORS
- 如何在http获取请求设置报头?
- 如何使用Ruby on Rails进行HTTP请求?
- REST API最佳实践:查询字符串中的参数vs请求体中的参数
- Access-Control-Allow-Credentials报头到底做什么?
- Express.js中的res.send和res.json的区别