1

我正在尝试像在 Postman 中一样以 JSON 格式获取数据。我不是 100% 确定邮递员是如何从 suppling 中获取数据的

  • 获取：网址
  • 标头（键：值）
  • 授权类型 OAuth 2.0 和访问令牌。

我一直在尝试搜索如何做到这一点，到目前为止我得到了这个。我不知道我错过了什么。

在此处输入图像描述

        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Bearer Token Authentication</title>
            <style>
                html {
                    font-size: 20px;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                    line-height: 1.7;
                }
            </style>
        </head>

        <body>
            <h1>Bearer Token Authentication</h1>
            <p>When working with tokens, like JWT, you need to send the token to the web server along with each HTTP Request.
            </p>
            <p><button id="btnFetch">Click to send a Request</button></p>
            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    document.getElementById('btnFetch').addEventListener('click', sendReq);
                    //pretend to get a token after logging in
                    sessionStorage.setItem('MyUniqueUserToken',
                        JSON.stringify(
                            'myTokenkey-sdfsdfsdf'
                            )
                    );
                });

                let sendReq = (ev) => {
                    let url = 'https://jsonplaceholder.typicode.com/posts';
                    let token = JSON.parse(sessionStorage.getItem('MyUniqueUserToken'));

                    let h = new Headers();
                    h.append('Authentication', `Bearer ${token}`);
                    h.append('Key', 'x-key-head');
                    h.append('Value', 'my-value-head');
                    let req = new Request(url, {
                        method: 'GET',
                        mode: 'cors',
                        headers: h
                    });
                    fetch(req)
                        .then(resp => resp.json())
                        .then(data => {
                            console.log(data[0]);
                        })
                        .catch(err => {
                            console.error(err.message);
                        })
                }
            </script>
        </body>

        </html>
4

0 回答 0