javascript - 带有预检请求的 CORS post

Question

我正在尝试使用 CORS 将文件上传到不同域上的服务，但由于来源被拒绝，它们一直失败。据我所知，使用了正确的 header 来实现这一点。

Javascript 请求:

  var xhr = new XMLHttpRequest();
  xhr.open('POST', "https://files.example.com", true);                                                                                                                            
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function () {
    if (this.status == 200 && this.readyState == 4) {
      console.log('response: ' + this.responseText);
    }
  };

  xhr.send();

预检 OPTIONS 请求的响应:

Access-Control-Allow-Headers:Origin, Authorization, Content-Type
Access-Control-Allow-Methods:POST, OPTIONS
Access-Control-Allow-Origin:*
Content-Length:0
Content-Type:application/json
Date:Mon, 19 Nov 2012 23:30:21 GMT

POST 请求的 header :

Cache-Control:no-cache
Content-Type:application/json
Origin:https://www.example.com
Pragma:no-cache
Referer:https://www.example.com
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_0) AppleWebKit/537.19 (KHTML, like     Gecko) Chrome/25.0.1325.0 Safari/537.19

导致错误的原因:

XMLHttpRequest cannot load https://files.example.com. Origin https://www.example.com is not allowed by Access-Control-Allow-Origin.

Answer 1

不幸的是，发布到您页面以外的域会引发 CORS。这还包括不同的子域、端口和协议(protocol) (http/https)。

预检在请求“不简单”时完成，这意味着内容类型 header 设置为“text/plain”以外的内容。您的“application/json”让浏览器害怕进行预检。

如果这 50-200 毫秒对您很重要，那么您可以重写您的 Web 服务以理解“简单”内容类型。如果不是，那么您应该让您的 Web 服务在使用 OPTIONS(http 方法)任务时返回 HTTP 状态 204(无内容)。

处理 wcf 时:

WebOperationContext.Current.OutgoingResponse.StatusCode = System.Net.HttpStatusCode.NoContent;