OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to fix CORS error in react + vite from front end?

  • Thread starter Thread starter AdSaMo
  • Start date Start date
A

AdSaMo

Guest
So I am trying to fetch data from an API but it keeps showing a CORS error no matter what I try... enter image description here

It is important to know that It is an external API and I don't have access to the server code. Only to my front-end code.

My code is the following:

`

Code:
const [contaminacion, setcontaminacion] = useState([]);

 
  const obtenerDatos = async (url) => {
    const datan = await fetch(url, {
      mode: "cors",
      method:"GET",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "cache-control": "no-cache",
      },
    });
    console.log(datan);
    const dataParsed = await datan.json();
    setcontaminacion(dataParsed.results);
  };

  
  useEffect(() => {
    obtenerDatos(
      "https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07"
    );
    
  }, []);

` I read in an old post (more than 5 years old) that I could use a proxy with Heroku, but in the comments they say that Heroku doesn't serve to this purpose anymore.

I have tried to set a proxy in my vite.config.js folder but it is not working for me and I don't know if I am doing it properly or not.

That's what I wrote: `

Code:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy:{
      '/api': {
        target: 'https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
      
    }

  },
  plugins: [react()]
})

` What am I missing here? Any help would be appreciated.

<p>So I am trying to fetch data from an API but it keeps showing a CORS error no matter what I try...
<a href="https://i.sstatic.net/4z3Ai.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4z3Ai.png" alt="enter image description here" /></a></p>
<p>It is important to know that It is an external API and I don't have access to the server code. Only to my front-end code.</p>
<p>My code is the following:</p>
<p>`</p>
<pre><code>const [contaminacion, setcontaminacion] = useState([]);


const obtenerDatos = async (url) => {
const datan = await fetch(url, {
mode: "cors",
method:"GET",
headers: {
"Access-Control-Allow-Origin": "*",
"cache-control": "no-cache",
},
});
console.log(datan);
const dataParsed = await datan.json();
setcontaminacion(dataParsed.results);
};


useEffect(() => {
obtenerDatos(
"https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07"
);

}, []);
</code></pre>
<p>`
I read in an old post (more than 5 years old) that I could use a proxy with Heroku, but in the comments they say that Heroku doesn't serve to this purpose anymore.</p>
<p>I have tried to set a proxy in my vite.config.js folder but it is not working for me and I don't know if I am doing it properly or not.</p>
<p>That's what I wrote:
`</p>
<pre><code>import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
server:{
proxy:{
'/api': {
target: 'https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}

}

},
plugins: [react()]
})

</code></pre>
<p>`
What am I missing here? Any help would be appreciated.</p>
 

Latest posts

U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top