0

I know there are plenty of articles on the topic but none of them helped me solve this issue.

I have a website where users can connect their Gmail account and manage their inbox. I make requests (to get, send, trash etc. messages) from the browser in javascript using an access token which I got from my Server.

When sending an Email with attachments, I always get:

Access to fetch at 'https://gmail.googleapis.com/upload/gmail/v1/users/me/messages/send?uploadType=multipart' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Along with a:

POST https://gmail.googleapis.com/upload/gmail/v1/users/me/messages/send?uploadType=multipart net::ERR_FAILED 200

But the message is sent successfully anyway !

In the Google Cloud Console, under APIs & Services > Credentials, in the settings of my "OAuth 2.0 Client ID", I added "http://localhost:8000" in the "Authorized JavaScript origins", waited 5 minutes and cleared my cache. But still get the CORS error.

I installed this Chrome extension https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf and it removes the error but I obviously can't ask my user to do that.

I thought maybe it could be due to an error in my request headers or body but the email is being sent so... Any ideas how to get rid of that error ?

Arnav Thorat
  • 3,078
  • 3
  • 8
  • 33
SaladeDeFruits
  • 105
  • 10
  • Did you try hosting the app in an actual domain with https yet? –  May 13 '22 at 07:51
  • Not yet. I'm only testing it locally. Do you think that would be the issue? – SaladeDeFruits May 13 '22 at 07:54
  • It looks like this is an ongoing issue: https://issuetracker.google.com/issues/157312473?pli=1 (check the last posts at the end of the page) –  May 13 '22 at 07:58
  • @ChrisG Thanks, I actually stumbled upon that link in my research and I just couldn't believe that there would be a bug in the API at the very moment I try to implement it... – SaladeDeFruits May 13 '22 at 08:05
  • This can also happen if you use an API incorrectly; the server will reply with a generic error message which might not have CORS headers set. –  May 13 '22 at 08:07
  • Did you try the boundary header thing? –  May 13 '22 at 08:12
  • Yes, I got ``content-type: multipart/related; boundary=D2tgpm6ov2x1Ah5w7DkA4UIMBBV6``in my request headers. It's the main boundary used to separate the email text part from the attachments. – SaladeDeFruits May 13 '22 at 08:19
  • @ChrisG I think the origin issue is a malformed request wich cause the Gmail API to omit the ``access-control-allow-origin`` header in the response even though the response status is 200, leaving you with no clue as to what the issue was. I use the Fetch API to make the request and I also get ``net::ERR_FAILED 200`` ! – SaladeDeFruits May 13 '22 at 08:28
  • What CORS error do you get? The message is not complete. The most important part is missing. – jabaa May 13 '22 at 08:29
  • @jabaa I updated it in my question – SaladeDeFruits May 13 '22 at 08:30
  • You could solve it using a proxy server. It's probably the only way. – jabaa May 13 '22 at 08:31
  • @jabaa yes, I might just end up asking my server to send the request instead of the browser but I want to understand that problem first and find the cleanest solution for my client. – SaladeDeFruits May 13 '22 at 08:33
  • This error message means that the server doesn't set the access control headers for this response. It seems to be a bug that was reported 2 years ago and still not fixed. You can wait until they fix it or solve it using a proxy server. – jabaa May 13 '22 at 08:35
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – jabaa May 13 '22 at 08:39
  • Does this answer your question? [How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?](https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow) – ziganotschka May 13 '22 at 08:39

0 Answers0