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.
but if i open network tool, I can see all data I want.
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.