javascript ajax POST问题答案

【问题标题】：javascript ajax POST issuejavascript ajax POST问题
【发布时间】：2019-01-07 21:57:29
【问题描述】：

我是托管在 AWS S3 上的简单 javascript 网页的问题，该网页使用 ajax 向 AWS API Gateway 发出 HTTP POST。

我可以使用 curl 成功拨打电话：

curl -X POST -H "Content-Type: application/json" https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta --data @data.json

data.json 文件：

{ "imie": "jasiu", "ocena": "6", "opinia": "niezle" }

我的 javascript 代码如下所示。

<html>
<body>
<title>Ankieta</title>

<h1>Wypelnik ankiete</h1>
<button type="button" onclick="uruchom()">JSON</button>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
function uruchom() {
    var resultDiv = $("#resultDivContainer");
    var myData = {"imie": "Michal"};
        $.ajax({
            url: "https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta",
            type: "POST",
            data: JSON.stringify(myData),
            crossDomain: true,
            contentType: "application/json",
            dataType: 'jsonp',
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            success: function () {
                alert("ok");
            },
            error: function() {
                alert("zonk");
            }

        });
};

</script>
</body>
</html>

这是我从网络调试中得到的错误： GET https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta?callback=jQuery17203000220305941388_1546897907447&{%22imie%22:%22Michal%22}&_=1546897908872 net::ERR_ABORTED 400

看起来回调有问题，并且 URL 被我的正文数据更改。就我而言，我不想检查回调是否正常 - 只想简单地发布数据。

感谢您的任何建议。

【问题讨论】：

您遇到问题是因为您的服务器说您发送了错误的请求。您的 json 文件和 myData 变量不同，您确定没有丢失 curl 中显示的那两个参数吗？
我已经试过了。即使与 data.json 文件中的 myData 相同，也会出现相同的错误:(
Access-Control-Allow-Origin 是回复标头，而不是请求标头。把它放在$.ajax 是没有意义的。
您不能将dataType: 'jsonp' 与type: "POST" 一起使用。

标签： javascript ajax amazon-s3 xmlhttprequest http-post

【解决方案1】：

POST 不能用于发送 JSONP 请求。 JSONP 实际上并不使用 AJAX，它通过创建一个 <script> 标记来工作，其 src 是 URL。无法通过这种方式发送 POST 数据，因此将 data 添加为 URL 参数。

如果此 API 需要 POST 数据中的 JSON，则不能使用 dataType: 'jsonp'。你必须使用dataType: 'json'。如果 API 不允许 CORS，则您需要在服务器上使用代理来发出实际请求，您不能直接从浏览器中进行。

【讨论】：

谢谢，是的，你是对的，我应该使用“dataType: json”。 API 上的 CORS 已启用，但这让我开始思考，我检查了 API 后面的 AWS Lambda，但出现了一个错误，因为我没有返回“Access-Control-Allow-Origin”标头。

【解决方案2】：

不要对数据对象进行字符串化。 JQuery 为你做这件事。只需传递对象。

var myData = {"imie": "Michal"};
        $.ajax({
            url: "https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta",
            type: "POST",
            data: myData,
            crossDomain: true,
            contentType: "application/json",
            dataType: 'jsonp',
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            success: function () {
                alert("ok");
            },
            error: function() {
                alert("zonk");
            }

        });

【讨论】：

谢谢，但我需要使用以下格式发送数据："data: JSON.stringify(myData),"

【解决方案3】：

感谢您的建议和回答，尤其是在 CORS 方向上。我确定我的 API GW 启用了 CORS，但没有检查其背后的 AWS Lambda，发现我没有将“Access-Control-Allow-Origin”标头返回给客户端。

exports.handler = function(event, context, callback) { callback(null, { "statusCode": 200, "headers": { "Access-Control-Allow-Origin": "*" } }); };

应用后，我可以发送 HTTP POST。

【讨论】：