如果跟踪进度，XMLHttpRequest无法发送cookie

Question

我有一个简单的代码将文件从https://app.myserver:4202发送到https://myserver/backend/upload.php

//script executed on`https://app.myserver:4202`
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://myserver.com/backend/upload.php");
xhr.withCredentials = true;
xhr.send(fd); //fd is formdata from file input

yay，它成功地用cookie发送文件，这样我就可以在我的upload.php脚本中执行用户身份验证了。现在，我还想显示进度条，因此我将代码更改为：

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://myserver.com/backend/upload.php");
xhr.withCredentials = true;
xhr.upload.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
        console.log("add upload event-listener" + evt.loaded + "/" + evt.total);
     }
  }, true);
xhr.send(fd);

哇，所有的东西都散开了！我们有个CORS问题。注意，我只添加了一个进度跟踪器。

Access to XMLHttpRequest at 'https://myserver/backend/upload.php' from origin 'https://myserver:4202' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我非常小心正确地设置了CORS，所以这是与CORS相关的myserver响应头。

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: DELETE, HEAD, GET, OPTIONS, POST, PUT
Access-Control-Allow-Origin: https://app.myserver.com:4202
Access-Control-Max-Age: 86400

如果不需要任何进度信息，它们就工作得很好，但是当它被跟踪时会失败。

告诉我，我在这里错过了什么？

Answer 1

我们有个CORS问题。注意，我只添加了一个进度跟踪器。

这种行为是在规范中定义

在XMLHttpRequestUpload对象上注册一个或多个事件侦听器将导致CORS预运行请求。(这是因为注册事件侦听器会导致设置上传侦听器标志，而这反过来又会导致设置use预飞标志。)

我非常小心正确地设置了CORS，所以这是与CORS相关的我的服务器响应头。

仔细阅读错误消息：

CORS策略阻止了来自“https://myserver/backend/upload.php”的对的访问“https://myserver:4202”：对飞行前请求的响应没有通过访问控制检查：没有HTTP状态。

因此，您设置的HTTP响应头并不是真正相关的。

浏览器正在发出选项请求，请求允许发出POST请求，而服务器正在使用其他200 OK响应。

可能是在发送405 Method Not Allowed。检查开发人员工具的Network选项卡，找出HTTP响应状态是什么，然后相应地调整服务器。