AngularJS 发送 OPTIONS 请求而不是 POST答案

【问题标题】：AngularJS Sends OPTIONS request instead of POSTAngularJS 发送 OPTIONS 请求而不是 POST
【发布时间】：2014-04-16 06:51:29
【问题描述】：

我正在尝试将图片上传到我的 S3 存储桶。我正在使用 AngularJS v1.2.13。当我使用他们文档中显示的简单案例时（使用action 标签提交表单）一切正常。但是，如果我想以 Angular 方式使用 ng-click Angular 发送 OPTIONS 请求而不是 POST 请求。

以下是服务代码，它首先去服务器获取签名（我知道那部分没问题）然后尝试用所有内容进行 POST。

myServices.factory('s3', function($http) {
    var service = {};

    service.upload = function(fileName) {

        return $http(
            {
                method:"POST",
                url: "sign",
                data: { "fileName": fileName }
            }
        ).then(
            function(result) {
                // success
                //resolve the promise as the data
                var data = result.data;
                var url = "https://" + data.bucket + ".s3.amazonaws.com/";

                return $http.post(url, {
                    "key": data.key,
                    "AWSAccessKeyId": data.awsKey,
                    "acl": data.acl,
                    "policy": data.policy,
                    "signature": data.signature,
                    "Content-Type": "image/jpeg",
                    "success_action_redirect": "http://localhost:3000/s3Uploaded"
            }).then(
            function(response) {
                // success
                console.log("s3.upload, success: ");
                console.log(response);
            },
            function(response) { 
                // failed
                console.log("s3.Upload, fail: ");
                console.log(response);
            }
        );

    },
        function(response) { 
            // failed
            console.log("s3.sign, fail: ");
            console.log(response);
        }
    );
};

return service;
});

我做错了什么？

【问题讨论】：

这是由于CORS策略，由浏览器自动完成，没有错。
您没有在 s3 存储桶中配置 cors 策略，以允许您正在使用的域。
Teena Pamecha 发布了一个 Answer 说“也许您没有为 Amazon S3 存储桶配置 CORS 或启用核心源 Configure CORS for an Amazon S3 Bucket How Do I Configure CORS on My Bucket?”

标签： angularjs post amazon-s3 httprequest

【解决方案1】：

在 CORS 的 S3 标头中添加标头：

访问控制允许来源：*

【讨论】：

【解决方案2】：

Angular 正在发送一个预检请求，所以如果你可以回到你的第一个计划，那就去做吧！

https://stackoverflow.com/a/44343635/1308736

https://stackoverflow.com/a/22968724/1308736

【讨论】：

【解决方案3】：

服务器将检查您是否应该允许在服务器本身上发布一些数据，或者不按照

跨域资源共享政策

您收到选项请求是很正常的。您的 ApI 服务器应该已配置为允许来自您的域的请求正常工作。

【讨论】：

【解决方案4】：

您需要将新的 CORS 策略配置添加到自己的 AWS S3 存储桶中

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://example.org</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

【讨论】：