jQuery CORS 内容类型选项

Posted 2023-02-25

【中文标题】jQuery CORS 内容类型选项

【英文标题】：jQuery CORS Content-type OPTIONS

【发布时间】：2012-09-01 11:26:30

【问题描述】：

我在使用带有自定义内容类型的 jQuery CORS 发送 AJAX 正文请求时遇到问题。 这是我的代码：

$.ajax(
  url: "http://some-other-domain/my-path",
  type: "POST",
  contentType: "application/json",
  dataType: "json",
  data: JSON.stringify(
    key: 1,
    key2: 2
  ),
  statusCode: 
    200: function(data) 
    
  ,
  xhrFields: 
    withCredentials: true
  ,
  crossDomain: true
);

我需要将 Content-type 设置为“application/json”，因为它需要服务器端。但不是以 POST 的形式发送请求 jQuery 将其作为 OPTIONS 发送。

这是一个标题：

响应标头：

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Pragma: No-cache
Cache-Control: no-cache
Expires: Thu, 01 Jan 1970 03:00:00 EET
Set-Cookie: JSESSIONID=BB9D6783E58FB0F2ADE1924A2F0CBA52; Path=/
Content-Type: text/html;charset=UTF-8
Content-Length: 6233
Date: Fri, 07 Sep 2012 14:41:13 GMT

请求标头：

OPTIONS /my-path HTTP/1.1
Host: MY-HOME-NAME
User-Agent: MY_USER_AGEMT
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: HERE-GOES-DOMAIN
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache

CORS 效果很好，所有必需的标头都是由服务器发送的，但如果它是通过 OPTIONS 类型发送的，则不是。 是 jQuery 的问题吗？

jQuery - 1.8.1

【参考方案1】：

此 OPTIONS 请求是 CORS 预检请求。它是在实际请求之前发送到服务器的请求，以请求发出请求的权限。自定义 Content-Type 实际上触发了预检。根据 CORS 规范 (http://www.w3.org/TR/cors/)，除了 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 之外的任何 Content-Typeother 都会触发预检。 p>

如果您无法控制远程服务器，那么您需要让他们支持 CORS 预检，或者尝试其他一些选项，例如 JSON-P。

如果您确实可以控制远程服务器，则可以将其更改为处理预检。为了处理预检请求，您应该在对 OPTIONS 请求的响应中发送以下标头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

响应应该是 HTTP 200。Access-Control-Allow-Methods 响应标头可以回显Access-Control-Request-Method 的值，也可以只是GET, POST, PUT, DELETE 以支持所有方法。 Access-Control-Allow-Headers 响应标头应回显Access-Control-Request-Headers 请求标头中的值。

一旦浏览器收到这些标头，它就会发出实际的请求。您可以在此处了解有关 CORS 预检请求的更多信息：

http://www.html5rocks.com/en/tutorials/cors/

【讨论】：

你。是。答：天赐之物。 Allow-Headers 问题让我着迷。但是，除了您发布的代码之外，您的解释还有助于激发灯泡，帮助我弄清楚如何让一切正常工作。谢谢！

它对我不起作用：/ 我只是在 servlet 过滤器中这样做

@monsur，顺便说一句，CORS 到底是什么让你对它如此感兴趣，以至于你写了一本书？ （whole world 中唯一一本关于 CORS 的书。）

不应该OPTIONS 返回204 No Content 响应吗？

如果您的服务器是Python Flask 应用程序，那么您可以在OPTIONS 方法上返回app.make_default_options_response()