尝试使用 $http angularjs 上传文件时的 CROS OPTIONS 请求答案

【问题标题】：CROS OPTIONS request when trying to upload a file with $http angularjs尝试使用 $http angularjs 上传文件时的 CROS OPTIONS 请求
【发布时间】：2016-09-18 12:53:58
【问题描述】：

我实际上是在尝试在我的客户端 angularjs 应用程序和我的服务器之间实现一个文件上传系统，但我在实现这个功能时遇到了困难。问题似乎来自 Chrome 发送的预检 OPTIONS 请求。

当我用邮递员测试我的路线时，一切正常。这是邮递员请求执行的一些屏幕截图：

First part of postman example

Second part of postman example

如您所见，该路由有两个参数，一个库 id 和一个要上传的文件以及一个身份验证令牌。

当我尝试在我的 Angular Web 应用程序中实现上传功能时出现问题。事实上，当我调用我的 $http 发布请求时，一个 OPTIONS 预检请求被发送到我的服务器。这个 OPTIONS 请求似乎没有任何在它之前为发布请求提供的参数使我的服务器端的身份验证中间件（具有验证用户/令牌的功能）响应 401 错误。

更准确地说：

XMLHttpRequest 无法加载.....预检响应具有无效的 http 状态代码 401

当说检测到跨源资源共享时，这些预检请求似乎是由浏览器发出的。这是我撞到了一堵砖墙。我似乎无法理解如何： - 发送带有选项请求的令牌以验证此请求 - 或绕过此选项请求直接发送我的帖子请求。

我的上传功能是这样的：

 $http({
        method: 'POST',
        url: 'my-upload-url',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: {
            library: my-library-id,
            file: my-file-to-upload,
            token: user-authentification-token
        },
        transformRequest: function (data, headersGetter) {
            var formData = new FormData();
            angular.forEach(data, function (value, key) {
                formData.append(key, value);
            });

            var headers = headersGetter();
            delete headers['Content-Type'];

            return formData;
        }
    })
    .success(function (data) {

    })
    .error(function (data, status) {

    });

我的问题是：

有没有办法在 OPTIONS 请求中实际发送我的用户令牌以使其在服务器端有效？
有没有办法格式化我的发布请求（标题/数据/参数）以使其绕过此预检浏览器请求？
我的 post 请求的格式是否有任何错误，从而触发了来自 Chrome 的 OPTIONS 请求？

提前感谢您的帮助。

马丁

【问题讨论】：

考虑实现这个 AngualJS 文件上传插件github.com/danialfarid/ng-file-upload

标签： angularjs upload request

【解决方案1】：

在 cors 中，OPTIONS 方法用于告诉服务器您的请求将做什么。服务器必须正确处理 OPTIONS，这样您的主请求才能正常发送。当您的请求是复杂的跨源请求时，浏览器会自动发送 OPTIONS 请求。
要绕过 OPTIONS 请求，您的请求应该是 POST 和 GET，内容类型必须是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain，并且标头仅包含 Accept、Accept-语言和内容-语言。
您的请求没有错。原因是你的请求是跨域请求，不是简单的请求。

所以解决这个问题最好的办法就是让你的服务器正确处理cors请求。

快递可以使用https://github.com/expressjs/cors

查看更多：cors-mdn cors-w3c

【讨论】：