CODEWITHSUNDEEP
reactjsfetch
chilo5432
chilo5432

Reputation: 147

Why does CORS not make a request?

I have a problem with a CORS request

Access to fetch at 'https://webhook.site/f9087e12-b444-4e6b-9e64-06ba47b8c24e' from origin 'https://localhost:5001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My request:

        fetch("https://webhook.site/f9087e12-b444-4e6b-9e64-06ba47b8c24e", {
        method: 'get',
        headers: new Headers({
            'Access-Control-Allow-Origin': 'https://localhost:5001',
            'Content-Type': 'application/json;charset=utf-8'
        }),
    })
        .then(res => res.json())
        .then(
            (result) => {
                console.log('res ' + result);
            },
            (error) => {
                console.log('error ' + error);
            }
        )

I can’t figure out how to solve the problem.

Upvotes: 0

Views: 1129

Answers (3)

Caius Jard
Caius Jard

Reputation: 74605

CORS is a server side thing. Your browser is contacting webhook.site and saying "I want to download that thing f9087e12-b444-4e6b-9e64-06ba47b8c24e, what domains will you serve it to?" and webhook.site is saying e.g. "I'll only serve it to scripts that were downloaded from whatever.com" and your browser is thinking "hmm, well the script making the request was downloaded from localhost so.. denied"

You need to change the webhook.site server so it has an allow for localhost, not the client. It is the server response to the OPTIONS request that must contain the Access-Control-Allowed-Origin header, not the request from the client. Or you need to make the request without CORS in which case the browser will not make the options request.

Upvotes: 2

Sydney Y
Sydney Y

Reputation: 3152

This is a browser's way of protecting it's users. Your request may be innocent, but imagine a scenario where the user goes to an innocent looking website which then uses http to send any password a user inputs to a thief. So the browser will only allow requests to the same domain or "origin".

There are ways around it, but the commonly accepted practice is to send the request to your server (localhost:5001) and your server sends a request to the other site and sends the response back to the browser.

That way all requests go through the domain that the user decided to trust by visiting.

Upvotes: 1

galusben
galusben

Reputation: 6372

CORS headers shall be returned from the server. The server behind https://webhook.site/f9087e12-b444-4e6b-9e64-06ba47b8c24e shall return the header 'Access-Control-Allow-Origin': 'https://localhost:5001' in response to all requests, especially the OPTIONS request (preflight).

Best intro to the subject I have seen is https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

In a nutshell, the server shall decide if it allows CORS in general and to what resources.

The browser is responsible to protect the user by obeying to the rules defined by the server.

Hope it is helpful...

Upvotes: 1

Related Questions