Unable to perform a GET request to an API with custom headers

I am attempting to send a GET request to an API, but I am encountering an error: Failed to fetch. What could be causing this issue?

const getData = () => {
  fetch("https://test-docs.stores.kg/api/categories", {
    method: "GET",
    headers: {
      secretKey: "test_key",
      accept: "application/json "
    }
  })
    .then((res) => res.json())
    .then((res) => console.log(res));
};

getData();

Answer №1

It appears that the API you are trying to access does not have a CORS header set, which is causing your request to be blocked. You can refer to https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more information on this issue. https://i.sstatic.net/IZ3ed.png

If you have control over this API, you can adjust the webserver settings to include the necessary CORS header, such as:

  • "Access-Control-Allow-Origin: https://YOUR_WEB_FRONTEND_DOMAIN.TLD"
  • (or for a development setup) "Access-Control-Allow-Origin: *"

You can also test the API using this tool:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating arrays and datasets using the power of JavaScript and jQuery

Recently, I wrote a code to arrange points inside a table, and everything was working perfectly when I specified an arrayOfDivs: http://jsfiddle.net/u58k6/6 var arrayOfDivs = [({topPosition : 99, leftPosition: 100}),({topPosition : 150, leftPosition: 400} ...

Preserving the Selected Date on the Calendar Even After the PHP Variable is Passed

I am currently using the calendar code below with a slight modification that I implemented. However, I have encountered an issue where when I select a date, the calendar successfully highlights the selected date. But once I pass this selected date along ...

Utilizing Ajax and JQuery to send information to a ASP server for processing

Hello everyone, I am facing an issue with ajax and need some help. I'm struggling to figure out how to properly display a variable in asp. Any guidance would be greatly appreciated. $(document).ready(function () { $("button").click(function () { ...

Mistakes in my async/await workflow: How am I incorrectly loading and injecting this external script?

Encountering a simple problem: some calls to refresh() cause window.grecaptcha to become undefined. It doesn't happen all the time, probably due to network delays. Debugging this issue is proving to be tricky, especially since I'm still new to th ...

Sharing the checkbox's checked status with an AJAX script

I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...

Tips for transferring information to an input field's value

There's an input box with an empty value that needs to be filled with data. <input type="text" value="" class="box"> $('.skills-tags').on('click', function(){ var value = $(".skills-tags").val(); $('.label-pr ...

What are some methods to boost productivity during web scraping?

Currently, I have a node script dedicated to scraping information from various websites. As I aim to optimize the efficiency of this script, I am faced with the challenge that Node.js operates on a single-threaded runtime by default. However, behind the sc ...

When implementing asynchronous form control validation in Angular 2, several API requests are triggered

Can anyone help me with adding async validation using a FormControl? For every keypress, I am receiving multiple responses and it seems like an extra request is triggered whenever I type or remove a character in the form control. code-snippets.component.t ...

Access a designated tab within a CSS-designed tab system

Can anyone offer some assistance? I currently have a tab structure created using CSS. The first tab is set as the default when the page loads. I am looking to create a link from another page that will take users directly to the page with the tabs and ope ...

Steps for displaying the output of a post request in printing

I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...

What is the method for obtaining the current date when altering the system date to a previous time?

To ensure that my datepicker always displays the current date and does not allow selection of past dates, I need to update the date if the system date is in the past. If I change the system date to a past date, I don't want the datepicker to reflect t ...

I created a news platform using Next.js server-side rendering, but I'm having trouble with the export const metadata = { title: "TEST" } not functioning as intended

After building my News Website using Next.js with Server Side Rendering, I encountered an issue with setting the page title. Despite using export const metadata = { title: "TEST" }, the title remained unchanged. The metadata object appears to be ...

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

As someone who is completely new to programming, I was given the task of creating a voting website for a class assignment. In order to store data locally, I managed to create variables and implement them using local storage: var eventName = document.getEl ...

NextJs not processing Bootstrap form submissions

I’m struggling to figure out why my form isn’t submitting when I click the submit button. The backend seems fine because Postman successfully sends the information to the database. However, nothing happens when I try to submit the form. My tech stack ...

Strategies for addressing input range slider cross browser compatibility issues

I have encountered an issue with the slider track while using a customized range slider with CSS. For Mozilla, I utilized the selector for progress (-moz-range-progress) and for IE I used -ms-filler-lower and -ms-filler-upper. Although it works well for b ...

Guide to fixing Vue app crashes caused by Web Sockets error

I'm encountering an issue with my Vue application as I am unable to load a specific page due to the app crashing. The console displays the following error, even though there is no implementation of Web Sockets in the app. Despite adding this snippet ...

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

I am facing a challenge with overriding an object method defined in a JavaScript (ES5) function-based class: var JSClass = function() { this.start = function() { console.log('JSClass.start()'); } } When I call the start() method, it pri ...

Tips for displaying live data in the rows of Element UI's Table

Recently, I've been working with a table that looks like this. <v-table :data="data"> <v-table-column prop="data.attribute" label="Attribute"> </v-table-column> </v-table> Instead of displaying data.attribute in the co ...

Utilizing multiple materials with a single mesh in three.js: A comprehensive guide

I am facing a major issue with three.js: My goal is to create a simple cube with different colors on each face. I attempted to achieve this using the following code snippet: // set the scene size var WIDTH = jQuery('#showcase').width() - 20 ...

Distinguish between a function and a constructor during execution

As I work with TypeScript, I am creating a function that accepts an error factory as an argument. This factory can be either a class name or a function. The function looks something like this: // Alias from class-transformer package type ClassConstructor& ...