Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/

by

TL;DR

https://googledocs-clone-sbayrak.netlify.app/ is not an origin. Drop that trailing slash.

More details about the problem

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.

More Related Contents:

  1. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  2. How to Protect website code PHP / JS? [closed]
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  5. How to enable cors nodejs with express?
  6. Is it safe to store a JWT in localStorage with ReactJS?
  7. Origin is not allowed by Access-Control-Allow-Origin
  8. React – changing an uncontrolled input
  9. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  10. How to display binary data as image in React?
  11. How do you send images to node js with Axios?
  12. How to add custom html attributes in JSX
  13. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  14. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  15. Uncaught (in promise) TypeError: Failed to fetch and Cors error
  16. How to make Puppeteer work with a ReactJS application on the client-side
  17. How to allow CORS in react.js?
  18. body data not sent in axios request
  19. Fetch image from API
  20. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  21. How do I add validation to the form in my React component?
  22. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  23. React.js Serverside rendering and Event Handlers
  24. Matched leaf route at location “/” does not have an element
  25. Increase JavaScript Heap size in create-react-app project
  26. Empty body in fetch POST request
  27. Webpack 5 – Uncaught ReferenceError: process is not defined
  28. ReactJS server-side rendering vs client-side rendering
  29. How to deploy a React + NodeJS Express application to AWS?
  30. Firebase-Admin, importing it to react application throws Module not found error

Leave a Comment