Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – CORS errors with fetch api

So i make an extension (on Aloha browser) where i inject javascript code in youtube website.
In this code, i’m doing two fetch api request, one from youtube (which works) and one from genius api.
This one doesnt work, i tryed a lot of thing to avoid the CORS error but i can’t get ride of it.

So i added this headers options :

myHeaders.append("Access-Control-Allow-Origin", "*");
myHeaders.append("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
myHeaders.append("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token, Authorization ");

i tryed with mode: 'cors' and mode: 'no-cors' but this two doesnt work either, i really dont know what to do because i’m not that good with api.

here is the error i get the most :

Access to fetch at 'https://api.genius.com/search?q=smthing' from origin 'https://www.youtube.com' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

And when i have mode: 'no-cors', i only get a 401 error which i dont really understand, there is no detail in the console but i dont really know if what wrote in the network tab of the dev tool could help

Tbh, i only want to get my data from the genius api anyway

Tags:

2

Answers


  1. 0

    add proxy: ‘your-localHost’ into your package json I think it will help, moreover if not , you have to check your main file copy past it to chatgpt and ask to define a CORS configuration , actually I am now aware of your stack but adding proxy: ‘localhost:3000’
    in your package.json can solve it

    Login or Signup to reply.
  2. 0

    Check Genius API Documentation:
    Ensure that the Genius API supports CORS and if there are any specific headers or settings you need to use. Some APIs may require you to include an API key in your request headers.

    Use ‘mode: cors’:
    In most cases, you should use mode: ‘cors’ in your Fetch API request. This indicates that the request should be treated as a CORS request. If you are using ‘no-cors’, the browser will not include the CORS-related headers in the request, and this might lead to a CORS error.

    fetch(‘https://api.genius.com/search?q=smthing’, {
    method: ‘GET’,
    headers: {
    ‘Content-Type’: ‘application/json’,
    ‘Authorization’: ‘Bearer YOUR_API_KEY’,
    },
    mode: ‘cors’,
    })

    Proxy Server:
    Consider setting up a proxy server to make requests to the Genius API from your server, and have your extension communicate with your server. This way, the same-origin policy won’t be violated.

    Remember that if the Genius API does not support CORS, you might need to proxy the requests through a server that adds the appropriate CORS headers or use JSONP (if the API supports it).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search