Fetch API - CORS issues with http and https

Question

I got some trouble with Fetch API. When I launch this code:

fetch('https://g.tenor.com/v1/search?q=love%20is%20war&key=3TXJWOV3UY1V&limit=8')
    .then(response => response.json(),{headers:headers})
    .then(data => {
    console.log(data) // Prints result from `response.json()` in getRequest
    })

From http://quenouillere.fr/ , it works without any issues. But when I want to use it from https://quenouillere.fr/ , it won't works with a CORS Issue. It detect that the origin isn't the same (because it's http who launch the request, and https who receive it) I search on Internet, but nobody seems to have this issue.

CORS issue on https

Thank u for ur answers in advance:)

Answer 1

I tried your request from the console tab of stackoverflow and everything was working fine because we send this header (in the request, this header is added automatically by your browser so you have nothing to do for it):

Origin: https://stackoverflow.com

And we receive this header from the response:

Access-Control-Allow-Origin: https://stackoverflow.com

I try the same request (your code basically) in the console tab of another website (here it was slack) and the header send is the request is (as expected):

Origin: https://app.slack.com

But I received this in the response:

Access-Control-Allow-Origin: https://stackoverflow.com

I checked (with network tab, Postman and Fiddler) and the second request has no mention of stackoverflow...

I don't know exactly why but it seems the server associate the origin with something from the sender (maybe the IP?) so you're stuck with the same origin for the moment...

So basically https://quenouillere.fr/ would have worked if it was your first try...

Best you can do is contact them directly.