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

17

我想将一张图片上传到我的S3存储桶中。我正在使用AngularJS v1.2.13。 当我像它们的文档中显示的那样使用简单的情况(使用action标签提交表单)时,一切都正常。但是,如果我想要按照Angular的方式使用ng-click,Angular会发送一个OPTIONS请求,而不是POST请求。

以下是Service代码,它首先去服务器获取签名(我知道那部分没问题),然后尝试进行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策略引起的,由浏览器自动完成,没有任何问题。 - aUXcoder
您忘记在S3存储桶中配置CORS策略,以允许您使用的域名。 - Pierre Emmanuel Lallemant
1
Teena Pamecha 发布了一个回答(https://stackoverflow.com/a/66289282),说“也许您没有为 Amazon S3 存储桶配置 CORS 或启用核心源 [为 Amazon S3 存储桶配置 CORS](https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html)[如何在存储桶上配置 CORS?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors)”。 - Scratte
4个回答

1

0
服务器将根据跨域资源共享策略检查您是否应该被允许在服务器上发布一些数据,这是很正常的,您会收到选项请求。您的API服务器应该已经配置为允许来自您的域的请求以正确工作。

0
在CORS的S3头中添加头部:
Access-Control-Allow-Origin: *

0

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

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接