Question

我正在尝试通过jquery ajax调用从我的网站创建一个视频上传进度条到位于同一域但不同端口的后端服务

https://mywebsite.com/upload致电https://mywebsite.com:3000/api/video/upload

这是我的ajax脚本：

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false);

   return xhr;
  },
  url: "https://mywebsite.com:3000/api/video/upload",
  data: dataForm,
  cache: false,
  contentType: false,
  processData: false,
  crossDomain: true,
  type: 'POST'
});

调用此ajax，我的POST请求总是变为OPTIONS

OPTIONS https://mywebsite:3000/api/video/upload Invalid HTTP status code 404

当我删除xhr函数时，ajax脚本工作正常。我能够上传一个视频，但没有进度监听器。

我的后端是在node.js上构建的。提前感谢您的帮助。

Answer 1

我发现我的服务器不支持OPTIONS请求，所以我在node.js文件中添加它

app.options('*', function(req, res, next){
    res.send(200);
});

效果很好:)）

Answer 2

发送GET时，POST方法跨域，OPTIONS方法首先发送“预检”请求。

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Preflighted_requests

看起来您正在收到404 Not Found响应。通过允许发送OPTIONS方法请求，确保您的请求目标URI返回诸如200 OK之类的内容。

Answer 3

嗯，尝试这样的事情:(这是jquery 1.11.x，php文件上传解析器就在html文件旁边）

private void openFile(Uri fileUri) {

    String mimeType = mModel.getMimeType(fileUri);

    if (mimeType != null) { //we have determined a mime type and can probably handle the file.
        try {
            /*Implicit intent representing the action we want.  The system will determine is it
            can handle the request.*/
            Intent i = new Intent(Intent.ACTION_VIEW);
            i.setDataAndType(fileUri, mimeType);

            //We ask the Activity to start this intent.
            mView.getActivity().startActivity(i);
        } catch (ActivityNotFoundException e) {
            /*If we have figured out the mime type of the file, but have no application installed
            to handle it, send the user a message.
             */
            Toast.makeText(mView.getActivity(), "The System understands this file type," +
                            "but no applications are installed to handle it.",
                    Toast.LENGTH_LONG).show();
        }
    } else {
        /*if we can't figure out the mime type of the file, let the user know.*/
        Toast.makeText(mView.getActivity(), "System doesn't know how to handle that file type!",
                Toast.LENGTH_LONG).show();
    }
}

ajax xhr.upload.addEventListener不适用于跨域调用

3 个答案: