REST API doesn't allow GET Requests from localhost (axios)

Question

I've been trying to get a response from a REST API through Axios, I've tried setting the headers up, specifically the Access-Control-Allow-Origin header as stated in the error message, which seems to be the main problem, because even as I insert the required header, it still doesn't acknowledge the header.

axios
   .get(url, {
     headers: {
       "Access-Control-Allow-Origin": "*",
       crossDomain: true,
       "Content-Type": "text/plain;charset=utf-8",
     },
     params: {
       access_key: API_KEY,
       adults: adults,
       origin: origin,
       destination: destination,
       departure: departure,
     },
   })
   .then((res) => {
     console.log(res.data);
   });

You have to configure CORS backend-side. There is a workaround, launch your browser without CORS check (depends on the browser and the operating system), for development purposes. — mbojko, Nov 08 '22 at 15:14
Does this answer your question? [Why does my http://localhost CORS origin not work?](https://stackoverflow.com/questions/10883211/why-does-my-http-localhost-cors-origin-not-work) — Daniel Beck, Nov 08 '22 at 15:42

Daniel Sepulveda · Answer 1 · 2022-11-12T22:21:20.503

0

Access-Control-Allow-Origin must be set on the backend, not the frontend. For example, in PHP, you would set the header at the beginning of the file:

header('Access-Control-Allow-Origin: *');

And then in your frontend, however you'd usually do, send the data. This solution is only for those with access to the backend of the server you're querying.

edited Nov 12 '22 at 22:21

answered Nov 08 '22 at 15:02

Daniel Sepulveda

11
4

Thanks for the response! But how can I make it possible to send a get request from React using Axios to a REST API? – A N D E U S Nov 08 '22 at 15:05
@ANDEUS I'm assuming that your need for the `Access-Control-Allow-Origin` signifies that the API is not accepting requests from any origin, meaning that you will not be able to send a `GET` request unless you have access to the backend. – Daniel Sepulveda Nov 08 '22 at 15:10
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 11 '22 at 13:26

score 0 · Answer 2 · answered Nov 08 '22 at 15:08

CORS is configured on the backend, here's an example with a NodeJS backend and a ReactJS frontend.

//API
import express from "express";
const app = express();
import cors from "cors";

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(
  cors({
    origin: [
      "http://localhost:3000",
    ],
    methods: ["GET", "POST", "PUT", "DELETE", "PATCH"],
    credentials: true,
  })
);

//React Frontend with useEffect and useState
useEffect(() => {
    const config = {
      headers: { "x-auth-token": token },
    };

    const fetchData = async () => {
      const results = await axios.get("/users/table", config);
      setRows(results.data);
    };
    fetchData();
  }, [setRows, state, token]);

REST API doesn't allow GET Requests from localhost (axios)

2 Answers2