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

Question

我有一个托管在 Azure 上的 Parse API 服务器 (www.parse.com)，我可以使用 Postman 毫无问题地调用 REST API。当我将它翻译到我的网络应用程序（使用 Postman jQuery AJAX 代码 sn-p 生成器）时，我在浏览器中收到 400（错误请求）响应。

一开始我通过postman成功调用API如下：

• 功能：发布
• 网址： https://myparsewebapp.azurewebsites.net/parse/classes/_User
• 标题： 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);
});

请注意，在我的源代码中，我删除了缓存控制和邮递员令牌标头。

我将其放入我的 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 sn-p 如下所示：

$("#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 限制