AngularJS发送OPTIONS请求而不是POST

ut6juiuv  于 2022-10-31  发布在  Angular
关注(0)|答案(4)|浏览(207)

我正在尝试上传一张图片到我的S3 bucket。我使用的是AngularJS v1.2.13。当我使用他们文档中显示的简单情况(提交带有action标签的表单)时,一切都正常。但是,如果我想用ng-click的Angular方式来做,Angular会发送一个OPTIONS请求,而不是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;
});

我做错了什么?

ewm0tg9j

ewm0tg9j1#

Angular正在发送飞行前请求,所以如果你能回到你的第一个计划,就这么做吧!
https://stackoverflow.com/a/44343635/1308736
https://stackoverflow.com/a/22968724/1308736

noj0wjuj

noj0wjuj2#

在CORS的S3表头中添加表头:
访问控制-允许-来源:*

2ic8powd

2ic8powd3#

服务器将检查是否允许您在服务器上发布一些数据,或者是否按照

  • 跨源资源共享策略 *

这是很正常的,你得到的选项请求。2你的ApI服务器应该配置为允许来自你的域的请求正常工作。

pzfprimi

pzfprimi4#

您需要将新的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>

相关问题