Why Does My CORS Policy Block Requests from \'https://example.com/\' with a Trailing Slash?

Access from origin 'https://example.com/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

TL;DR

Web origins do not contain a path. Accordingly, https://googledocs-clone-sbayrak.netlify.app/ is not a valid Web origin. Drop that trailing slash.

More Details about CORS's Web Origins

No Trailing Slash Allowed in the Value of the Origin Header

According to the CORS protocol (specified in the Fetch standard), browsers never set the Origin request header to a value with a trailing slash. Therefore, if a page at https://googledocs-clone-sbayrak.netlify.app/whatever issues a cross-origin request, that request's Origin header will contain

https://googledocs-clone-sbayrak.netlify.app

without any trailing slash.

Byte-by-Byte Comparison on the Server Side

You're using Socket.IO, which relies on the Node.js cors package. That package won't set any Access-Control-Allow-Origin in the response if the request's origin doesn't exactly match your CORS configuration's origin value (https://googledocs-clone-sbayrak.netlify.app/).

Putting It All Together

Obviously,

'https://googledocs-clone-sbayrak.netlify.app' ===
'https://googledocs-clone-sbayrak.netlify.app/'

evaluates to false, which causes the cors package not to set any Access-Control-Allow-Origin header in the response, which causes the CORS check to fail in your browser, hence the CORS error you observed.

Example from the Fetch Standard

Section 3.2.5 of the Fetch Standard even provides an enlightening example of this mistake:

Access-Control-Allow-Origin: https://rabbit.invalid/

and explains why it causes the CORS check to fail:

A serialized origin has no trailing slash.

The above is the detailed content of Why Does My CORS Policy Block Requests from \'https://example.com/\' with a Trailing Slash?. For more information, please follow other related articles on the PHP Chinese website!