SUBSCRIBE

Blog - Complete info - [ Ссылка ]

How to Solve CORS Error?

Access to fetch at 'IMAGE-URL-FROM-FIREBASE-CLOUD -STORAGE' from origin '[ Ссылка ]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
#angular
#react
#firebase
#ionicframework
#reactnative

Link to GCP console- [ Ссылка ]

create a cors JSON file and paste the below code

[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]


Please Subscribe 🙏🙏. -----


Firebase storage CORS fix for Web app hosted on Firebase hosting.

How do CORS work?
There are two types of CORS requests: simple and preflight. A simple request can be initiated directly. A preflight request must send a preliminary, "preflight" request to the server to get permission before the primary request can proceed. A request is pre-flighted if any of the following circumstances are true:

It uses methods other than GET, HEAD, or POST.
It uses the POST method with a Content-Type other than text/plain, application/x-www-form-urlencoded, or multipart/form-data.
It sets custom headers. For example, X-PINGOTHER.
The following process occurs when a browser makes a simple request to Cloud Storage:

The browser adds the Origin header to the request. The Origin header contains the origin of the resource seeking to share the Cloud Storage bucket's resources, for example, Origin:[ Ссылка ].

Cloud Storage compares the HTTP method of the request and the value of the Origin header to the Methods and Origins information in the target bucket's CORS configuration to see if there are matches. If there are, Cloud Storage includes the Access-Control-Allow-Origin header in its response. The Access-Control-Allow-Origin header contains the value of the Origin header from the initial request.

The browser receives the response and checks to see if the Access-Control-Allow-Origin value matches the domain specified in the original request. If they do match, the request succeeds. If they don't match, or if the Access-Control-Allow-Origin header is not present in the response, the request fails.

A preflight request performs the following steps first. If it is successful, it then follows the same process as a simple request:

The browser sends an OPTIONS request containing the Requested Method and Requested Headers of the primary request.

Cloud Storage responds back with the values of the HTTP methods and headers allowed by the targeted resource. If any of the method or header values in the preflight request aren't in the set of methods and headers allowed by the targeted resource, the request fails, and the primary request isn't sent.

This is a simplified description of CORS.

свернуть