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

Question

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

我正在尝试查询 api 端点以取回票证。我使用 postman 进行查询，并将票证响应作为标题选项卡中显示的文本返回。但是，我想使用 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>

Answer 1

从规范来看:

An opaque filtered response is a filtered response whose type is "opaque", URL list is the empty list, status is 0, status message is the empty byte sequence, header list is empty, and body is null.

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

• https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
• https://developer.mozilla.org/en-US/docs/Web/API/Response/type