javascript - Postman REST API 调用解析服务器在 Javascript 网站中不起作用

Question

我有一个托管在 Azure 上的 Parse API 服务器 ( www.parse.com )，我可以使用 Postman 对其进行 REST API 调用，不会出现问题。当我将其转换为我的 Web 应用程序(使用 Postman jQuery AJAX 代码片段生成器)时，我在浏览器中收到 400(错误请求)响应。

最初，我通过 postman 成功调用 API，如下所示:

• 功能:发布
• 网址: https://myparsewebapp.azurewebsites.net/parse/classes/_User
• header : X-Parse-Application-Id =(我在 Azure CP 中设置的应用程序 ID)
• 正文: {"username":"firstuser","password":"shushitsasecret","email":"myemail@gmail.com"}

通过上述操作，我可以在 Parse Server 中成功创建一个新用户。太棒了!

接下来，我使用 Postman Generator 复制代码并收到以下输出:

  var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://myparsewebapp.azurewebsites.net/parse/classes/_User",
  "method": "POST",
  "headers": {
    "x-parse-application-id": "(My Application ID Set In The Azure CP)",
    "cache-control": "no-cache",
    "postman-token": "2a3c4ffc-b636-3ac4-bd7c-e559f7bced1b"
  },
  "data": "{\n    \"username\":\"firstuser\",\n    \"password\":\"shushitsasecret\",\n    \"email\":\"myemail@gmail.com\"\n}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

请注意，在我的源代码中，我删除了缓存控制和 postman token header 。

我将其放入我的 Angular 1 应用程序中，格式如下:

<div id="register_form" style="display: none">
    <button type="button" class="uk-position-top-right uk-close uk-margin-right uk-margin-top back_to_login" ng-click="backToLogin($event)"></button>
    <h2>Create an account</h2>
    <form id="register">
        <div class="uk-form-row">
            <label for="register-username">Username</label>
            <input id="register-username" type="text" />
        </div>
        <div class="uk-form-row">
            <label for="register-password">Password</label>
            <input id="register-password" type="password" />
        </div>
        <div class="uk-form-row">
            <label for="register-email">E-mail</label>
            <input type="text" id="register-email" />
        </div>
        <div class="uk-margin-medium-top">
            <input id="register-submit" type="submit" value="Sign Up!" />
        </div>
    </form>
</div>

然后我将数据更改为如下所示:

"data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",

我的完整 Javascript 片段如下所示:

$("#register").submit(function(event) {
                    event.preventDefault();

                    var name = $("#register-username").val();
                    var password = $("#register-password").val();
                    var email = $("#register-email").val();

                    var settings = {
                        "async": true,
                        "crossDomain": true,
                        "url": "https://myparsewebapp.azurewebsites.net/parse/classes/_User",
                        "method": "POST",
                        "headers": {
                            "x-parse-application-id": "(My Application ID Set In The Azure CP)"
                        },
                        "data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",
                    }
                    console.log(settings);
                    $.ajax(settings).done(function(response) {
                        console.log(response);
                    });
                });

设置的console.log输出如下:

Object
async
:
true
crossDomain
:
true
data
:
"{"username":"admin","password":"secret","email":"myemail@gmail.com"}"
headers
:
Object
x-parse-application-id
:
"(My Application ID Set In The Azure CP)"
__proto__
:
Object
method
:
"POST"
url
:
"https://myparsewebapp.azurewebsites.net/parse/classes/_User"
__proto__
:
Object

大约 1 分钟后，我得到以下响应输出:

POST https://myparsewebapp.azurewebsites.net/parse/classes/_User 400 (Bad Request)

Answer 1

如果你想发送json那么你需要设置contentType:'application/json; charset=utf-8' 因为 $.ajax 的默认设置是发送表单编码请求。

除此之外，如果请求是跨域的，您还需要确保您的 api 中启用了 CORS。像 Postman 这样的 REST 客户端不受 CORS 限制