'I use Fetch API to get data from wikipedia open api, the console has result, but Promise of fetch hasn't data [duplicate]

First, I try to send request by browser, everything is ok.

Second, I tried following code, the console of Microsoft Edge show this error:

Access to fetch at 'https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search=hello&callback=JSON_CALLBACK' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

<body>
    <h1>Hello</h1>
    <script>
        (async function (){
            let response = await fetch("https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search=hello&callback=JSON_CALLBACK", {
                method: "GET",
            })
            let text = await response.text();
            console.log(response);
            console.log(text);
        })();
    </script>
</body>

Then, I add mode property like this:

let response = await fetch("https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search=hello&callback=JSON_CALLBACK", {
    method: "GET",
    mode: "no-cors"
})

the console doesn't show error, but the response.ok is false, and the response.body is null.

enter image description here

but if i open network tool, I can see all data I want. enter image description here

I know if I want to get data by json padding, I should create a script label, and use docuemnt.body.appendChild(script) to get data. I just don't know why i failed by Fetch API.

javascripthtmlcorsfetch


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions