How to fetch DuckDuckGo API

Question

i made a single webpage to get DuckDuckGo Instant Answer API result, https://adamorielly.github.io/Ducksearch/

But i'm getting 405 Method Not Allowed response when i just tried to make a fetch GET request, Cross-Origin Request Blocked: The Same Origin Policy disallows.

I guess the purpose of this API is to allow other apps to get search results and render them on their apps, am i doing it wrong? , here's my code:

<section class="bd-container">
    <div class="duck__search">
        <div class="form__div">
            <input type="text" id="input1" class="form__input" placeholder="enter your search query">
            <label for="" class="form__label"></label>
        </div>
        <input type="submit" class="button" id="form__button" value="Search">
        <div class="duck__result" id="duck__result"></div>
    </div>
</section>

my javascript:

const searchBtn = document.getElementById('form__button')
searchBtn.addEventListener('click', () => {
    let formInputs = document.getElementById('input1').value
    fetch('https://api.duckduckgo.com/?q='+formInputs+'&format=json', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => {
        console.log(res.status)
        console.log(res.statusText)
        let result = JSON.parse(res.body)
    }).then(data => console.log(data)).catch(err => console.error('err'))
})

if the API doesn't allow fetch request, is there another way to do it