时间戳

首页 > 解决方案 > 使用 fetch API 查询端点以获取 json 响应并返回空响应错误

javascript - 使用 fetch API 查询端点以获取 json 响应并返回空响应错误

问题描述

请原谅冗长的调试信息和代码。我认为这一切都是相关的。

我正在尝试查询 api 端点以取回票证。我使用邮递员进行查询，并将票证响应作为标题选项卡中显示的文本返回。但是，我想使用 java 脚本来取回该票并用它做其他事情。当我运行脚本时，它会在控制台中记录一个错误：

SyntaxError: Unexpected end of input
    at FetchDemo.html:48
(anonymous) @ FetchDemo.html:54

Promise.catch (async)
getTicket @ FetchDemo.html:53

我得到的回应是这样的：

type: "opaque"
url: ""
redirected: false
status: 0
ok: false
statusText: ""
headers: Headers {}
body: (...)
bodyUsed: false
__proto__: Response

我的代码如下：

<script>

let URL = 'https://jsonplaceholder.typicode.com/posts/';
let TabURL = 'http://15.222.0.10/trusted/?username=admin';

document.getElementById("getTicket").addEventListener('click',getTicket);



function getTicket() {
    console.log("in side getTicket");
    //setup an options array to pass into the fetch call
    let options = {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            'Accept' : 'application-json,*/*',
            'Content-Type' : 'application:json'
        }
    };


    console.log(TabURL);
    console.log(options);
    fetch (TabURL,options)
        .then(response => {
            console.log(response);
            return response.json();
        })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.error(error);
        });

}

</script>

标签： javascriptrestfetch

解决方案

从规格：

不透明过滤响应是类型为“不透明”的过滤响应，URL 列表为空列表，状态为 0，状态消息为空字节序列，标头列表为空，正文为空。

您收到不透明响应的原因是因为您使用了该no-cors标志。如果你想做这样的跨域请求，你需要 CORS。

推荐阅读