CORS policy block on projects/delete/{title}

[jhhowa]

I get the following error when trying to delete a project from an authenticated user:

Access to XMLHttpRequest at 'https://api-circlespace.herokuapp.com/files/Project%201/delete' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Think the CORS "Access-Control-Allow-Origin" header needs to be added to this route and probably any others that are missing it.

[adleris]

Any idea why I never ran into this issue? I don't know where else specifically it would need to be added as I've never encountered it

[jhhowa]

It's due to using the route from a different origin (in this case, localhost). We ran into it with another route and adding cors() in the main server.js (or app.js, I can't remember the file name in the API) seemed to fix it. Not sure why it would be popping up for an individual route but not for others.

@anthgiang I think you fixed the cors issue last time, do you have any idea why this might be happening?

[anthnnygiang]

@jhhowa I can not reproduce this error. Using Swagger on Heroku and localhost, I created a user and a project and deleted it successfully in both the master and dev branches. Both also had "access-control-allow-origin: * " in their response headers. Can you try remembering how to reproduce it?

[jhhowa]

@anthgiang You'll never get CORS errors when testing from Swagger, as the requests are coming from the same origin. CORS deals with 'cross-origin' requests so a request that isn't from the same server might be blocked.

The current deployment of the front-end (master branch of jhhowa/eportfolio-frontend) doesn't have the delete functionality implemented, but the "feature/delete-project" branch does which you can test locally.

I also tried adding: {"Access-Control-Allow-Origin": "*"} to the headers of the delete request but this didn't make a difference. Still getting the same error.

Looking at https://stackoverflow.com/questions/11181546/how-to-enable-cross-origin-resource-sharing-cors-in-the-express-js-framework-o you might need to add manual res headers to apply to all routes in app.js? I'm not sure why it would only be affecting some routes after you added require('cors') and app.use(cors()) to app.js

[jhhowa]

Okay I think I fixed it. So weird hahaha. Adding an empty body to the request made it work. I'm not sure if this is because of the axios library we're using on the front-end for API requests, or that POST requests with an empty body is bad practice, but POSTing to projects/delete/{title} with the "x-auth-token: {jwt}" header in the header, and body = {}, works perfectly. Not including a body causes the CORS error.