wpcodevo/fullstack-rust-app

Error when posting new feedback

Closed this issue · 2 comments

philippelejeune01 commented

Hello,

I built the project as explained in the article but I'm getting the following errors when trying to 'POST' feedbacks:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks?page=1&limit=10. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks/. (Reason: CORS request did not succeed). Status code: (null).

I was able to fix it by replacing .allowed_origin("http://localhost:3000) to .allow_any_origin() in /backend/src/main.rs:43
Could someone explain why that is the case?
I ran the container on Debian and accessed it through the same machine.

wpcodevo commented

Hello,

I built the project as explained in the article but I'm getting the following errors when trying to 'POST' feedbacks:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks?page=1&limit=10. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/feedbacks/. (Reason: CORS request did not succeed). Status code: (null).

I was able to fix it by replacing .allowed_origin("http://localhost:3000) to .allow_any_origin() in /backend/src/main.rs:43 Could someone explain why that is the case? I ran the container on Debian and accessed it through the same machine.

If you have already allowed http://localhost:3000 but are still encountering CORS errors, you can take the following steps to address the issue:

  1. Open the browser's developer tools and navigate to the 'Network' tab.
  2. In the 'Network' tab, trigger the requests that resulted in the CORS errors.
  3. Locate the specific request that returned the CORS error and find the 'Origin' or 'Referer' header in the request headers section.
  4. The value of the 'Origin' or 'Referer' header indicates the hostname from which the frontend application is making the requests.
  5. Once you have identified the hostname, make sure to add it to the allowed origins in the CORS configuration of the backend.

Please be cautious when allowing any origin using allow_any_origin(), as it can introduce security risks. It's important to add only the specific hostname that you discovered from the network tab.

I hope this guidance helps!

philippelejeune01 commented

Ok I did the browser debugging and got 127.0.0.1:3000. Replacing localhost to 127.0.0.1 solved the issue