I have a core web API application with several endpoints and I have a simple UI built to access an endpoint with a button click using javascript fetch API.

 fetch('api/Sessions', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(callData)
    })
    .then(response => response.text())
    .then((response) => updateResponse(response))
    .catch(error => console.error(error));
}

Now the API endpoint in the controller is authenticated with API-KEY, [ServiceFilter(typeof(AuthorizeKey))] I can no longer access the endpoint from my UI. How can I change the HTML/javascript code in order to send the post request from my UI to the authenticated endpoint? Thanks

I have a core web API application with several endpoints and I have a simple UI built to access an endpoint with a button click using javascript fetch API.

 fetch('api/Sessions', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(callData)
    })
    .then(response => response.text())
    .then((response) => updateResponse(response))
    .catch(error => console.error(error));
}

Now the API endpoint in the controller is authenticated with API-KEY, [ServiceFilter(typeof(AuthorizeKey))] I can no longer access the endpoint from my UI. How can I change the HTML/javascript code in order to send the post request from my UI to the authenticated endpoint? Thanks

• javascript
• html
• api

• Please do not tag your questions with language tags not related to your problem – MindSwipe Commented May 25, 2020 at 8:22
• 2 You would do this using the HTTP Authorization header, but for that we need to know what kind of authorization your server is doing, is it bearer token auth? If so, then you need the header 'Authorization': 'Bearer <insert api key here> – MindSwipe Commented May 25, 2020 at 8:25
• In the API, we are getting the API secret key from the header as context.HttpContext.Request.Headers["X-API-KEY"];. Therefore as per my understanding is it possible to add the key in the header and how to add it if it's possible? – anonymous Commented May 25, 2020 at 9:53
• Yes, your client side would simply need to add the "X-API-KEY" header to the request, with the value of your API key – MindSwipe Commented May 25, 2020 at 10:05

1 Answer 1

Please correct me if I'm wrong.

fetch('api/Sessions', {
        method: 'POST',
        headers: {
            'X-API-KEY': 'apikey',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(callData)
    })
    .then(response => response.text())
    .then((response) => updateResponse(response))
    .catch(error => console.error(error));