Jquery ajax调用使用swagger rest api获取“错误”答案

【问题标题】：Jquery ajax call getting 'error' with swagger rest apiJquery ajax调用使用swagger rest api获取“错误”
【发布时间】：2017-06-01 17:01:43
【问题描述】：

我使用swagger脚本生成了一个rest api。

{
  "swagger": "2.0",
  ...
},
"host": "localhost:8080",
"basePath": "/swagger-item-jaxrs",
"schemes": [ "http" ],
"consumes": [ "application/json" ],
"produces": [ "application/json" ],
"paths": {
"/item/{cd}": {
  "get": {
    "description": "Returns an item based on the item code passed.",
    "operationId": "findItemById",
    "produces": [
      "application/json",
      "application/xml",
      "text/xml",
      "text/html"
    ],
    "parameters": [
      {
        "name": "cd",
        "in": "path",
        "description": "CD of item to fetch",
        "required": true,
        "type": "string"
      }
    ],
    "responses": {
      "200": {
        "description": "item response",
        "schema": {
          "$ref": "#/definitions/item"
        }
      },
      "default": {
        "description": "unexpected error",
        "schema": {
          "$ref": "#/definitions/errorModel"
        }
      }
    }
  }
}
},
"definitions": {
"item": {
  "type": "object",
  "required": [
    "cd",
    "name"
  ],
  "properties": {
    "cd": {
      "type": "string"
    },
    "name": {
      "type": "string"
    },
    "tag": {
      "type": "string"
    }
  }
},
"errorModel": {
  "type": "object",
  "required": [
    "code",
    "message"
  ],
  "properties": {
    "code": {
      "type": "integer",
      "format": "int32"
    },
    "message": {
      "type": "string"
    }
  }
}
}
}

我可以使用客户端调用api生成java类，甚至可以在浏览器中输入url并得到响应。

浏览器：http://localhost:8080/swagger-item-jaxrs/item/0446840

回复：{"cd":"0446840","name":"ROYAL BASMATI RICE "}

Swagger UI 甚至可以得到相同的响应，并表明 curl 命令是：curl -X GET "http://localhost:8080/swagger-item-jaxrs/item/0446840" -H "accept: application/json"

我的 ajax 代码：

$.ajax({ url: "http://localhost:8080/swagger-item-jaxrs/item/0446840" , method: "GET" , headers: { "accept": "application/json" } }) .done(function(data) { alert('success'); console.log('success: '); console.log(data); }) .fail(function(err) { console.log('error: '); console.log(err); });

Chrome 开发者工具控制台结果：

error: Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}

任何帮助将不胜感激。

【问题讨论】：

标签： jquery ajax curl

【解决方案1】：

我看到您的代码不起作用的两个可能原因：

您提供的示例 swagger 文件无效。至少在开头应该有一个{。由于$.ajax 会自动尝试解析，因此您需要确保以有效的 JSON 格式接收数据。但是可以阻止 $.ajax 解析 JSON。为此，您需要将 dataType: "text" 添加到 $.ajax 的设置对象中。
使用 localhost 会导致问题，因为安全设置不同于访问互联网上的普通网站。因此我建议你使用您的机器名称和本地主机。

为了找出问题所在，您需要查看错误文本。像这样更改您的代码：console.log(err.statusText)

你需要弄清楚这个错误是发生在客户端还是服务器端。查看服务器的日志文件。你能看到你的要求吗？ http状态码是什么？

下一步：在谷歌浏览器/开发者工具中查看网络选项卡。你能看到请求和响应吗？双击可以查看所有详细信息。你能看到服务器的响应吗？

然后在服务器上，您应该尝试更改日志记录级别以进行跟踪甚至调试。这使您可以查看请求的所有详细信息。

【讨论】：

我仔细检查了 json 招摇。我在editor.swagger.io/#! 的 Swagger 编辑器中使用了 yaml 并下载了 json，这就是它的生成方式。我添加了 dataType：“text”，将 localhost 更改为我的机器名称，并将 console.log 更改为 err.statusText。我得到的只是“错误”这个词。
我能够获取 curl 并运行 curl 命令并且它可以工作。此时我唯一无法开始工作的是来自 ajax 调用，它出错了，这是唯一给出的信息。
我终于找到了问题所在。我需要在我的 javascript 中添加一个函数来防止默认提交。

【解决方案2】：

这是由于我的 javascript 中没有阻止提交功能。 $('#form').submit(function(e){ e.preventDefault(); });

添加此页面后，页面就可以工作了。

【讨论】：