Jsonstub 响应未显示答案

【问题标题】：Jsonstub response not showingJsonstub 响应未显示
【发布时间】：2017-08-16 08:06:12
【问题描述】：

axios.get('http://jsonstub.com', {
  headers: {
    'Content-Type': 'application/json',
    'JsonStub-User-Key': '1699b7fc-cdcb-4205-b30a-b9b3626246c5',
    'JsonStub-Project-Key': 'f39f1bd2-d303-4b7e-9a11-c0f049a46f87'
}
}).then((data) => console.log(data))

我已经设置了 jsonstub，但是当我尝试使用 axios 发出请求时，我得到状态 200 OK，带有 html 响应。当我打开该 html 时，它显示“找不到页面”。使用 Postman 执行此操作可以让我返回我的 json。我从 localhost:8080 执行此操作

这是html的内容： "

<!DOCTYPE html>
         <html>
         <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jsonstub</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <base href="/" />
<meta name="jsonstub-ember/config/environment" content="%7B%22modulePrefix%22%3A%22jsonstub-ember%22%2C%22environment%22%3A%22production%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22API%22%3A%7B%22devMode%22%3Afalse%2C%22host%22%3A%22https%3A//jsonstub.com%22%2C%22namespace%22%3A%22api%22%7D%2C%22STRIPE%22%3A%7B%22pubKey%22%3A%22pk_B95JCBxoUTpYXMGMKuPj0TTKDq30k%22%7D%7D%2C%22simple-auth%22%3A%7B%22authorizer%22%3A%22simple-auth-authorizer%3Aoauth2-bearer%22%2C%22crossOriginWhitelist%22%3A%5B%22http%3A//jsonstub.dev%22%2C%22http%3A//jsonstub.com%22%5D%2C%22routeAfterAuthentication%22%3A%22projects%22%2C%22store%22%3A%22simple-auth-session-store%3Alocal-storage%22%7D%2C%22simple-auth-oauth2%22%3A%7B%22serverTokenEndpoint%22%3A%22https%3A//jsonstub.com/oauth/v2/token%22%2C%22serverTokenRevocationEndpoint%22%3A%22https%3A//jsonstub.com/oauth/v2/token/destroy%22%2C%22refreshAccessTokens%22%3Atrue%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy-Report-Only%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%22%27none%27%22%2C%22script-src%22%3A%22%27self%27%22%2C%22font-src%22%3A%22%27self%27%22%2C%22connect-src%22%3A%22%27self%27%22%2C%22img-src%22%3A%22%27self%27%22%2C%22style-src%22%3A%22%27self%27%22%2C%22media-src%22%3A%22%27self%27%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />

        <link rel="stylesheet" href="assets/vendor-ec593555806ed9257ba3499907f73f05.css">
        <link rel="stylesheet" href="assets/jsonstub-ember-11fc6f9189ee15ceb15648c1eb7cfe98.css">
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-47943224-1', 'auto');
        </script>
    </head>
    <body>
        <script src="assets/vendor-8d0596b15526f36ae70009098f6d3f25.js"></script>
        <script src="assets/jsonstub-ember-d11e3620aa442db7b2ba53d465f4e89e.js"></script>
    </body>
</html>

【问题讨论】：

它打印，但带有 html 错误页面，而不是 json

标签： javascript http axios

【解决方案1】：

这是因为HTTP请求中没有发送标头'Content-Type': 'application/json'。

在 axios 中，如果请求正文为空，Content-Type 将从 HTTP 标头中删除。反正Content-Type是请求体的类型，所以这样的设计是有道理的。参考 GitHub 中的discussion。

但是，Jsonstub announced 必须始终为任何存根请求提供 Content-Type: application/json 标头。这就是为什么当标头 'Content-Type': 'application/json' 丢失时，您会收到奇怪的 html 响应。

解决方法很简单，在 HTTP 请求正文中传递任意数据：

axios.get('http://jsonstub.com', {
  headers: {
    'Content-Type': 'application/json',
    'JsonStub-User-Key': '1699b7fc-cdcb-4205-b30a-b9b3626246c5',
    'JsonStub-Project-Key': 'f39f1bd2-d303-4b7e-9a11-c0f049a46f87'
  },
  data: {}
}).then((data) => console.log(data))

【讨论】：

使用空对象添加 data 键解决了我的问题。

【解决方案2】：

也许是CORS 的问题？你能看看 DevTools 控制台的输出吗？

HTML 响应的内容也可能会有所帮助...

【讨论】：

对象{数据："↵↵ ↵ ↵ ↵ ↵", status: 200, statusText: "OK", headers: Object, config: Object...} 这就是我返回的...
"↵↵ ↵ ↵ ↵↵”，状态：200，标题：ƒ，配置：{...}，状态文本：“OK”，...}“