Experiencing an unusual error.
When a user attempts to upload a file, an AJAX request is sent to the server. The server then authenticates with OAuth2 to Google's servers, generates an access token, initiates a resumable upload process, and provides the resumable upload URI and access token back to the browser.
Subsequently, the browser directly uploads the file to Google Storage.
Despite successfully transmitting the file to the Storage Bucket, a CORS error persists in Chrome without clear indication of its origin or cause. Below is a simplified version of my JavaScript code:
var file = document.getElementById("fileInput").files[0];
var request = requestUpload();
var token = request.token;
var uri = request.uri;
var r = new XMLHttpRequest();
r.open('PUT', uri, true);
r.setRequestHeader("Authorization", "Bearer "+token);
r.send(file);`
While seemingly straightforward, the following common error continues to occur:
XMLHttpRequest cannot load https://www.googleapis.com/upload/storage/v1/b/*****. No 'Access-Control-Allow-Origin' header is present on the requested resource.Despite functionality, I am puzzled by this persistent error message. Could it be that JavaScript is requesting unauthorized information by default? I aim for a seamless operation without any errors.
After completion of uploading, the XMLHttpRequest object triggers an error event, suggesting that perhaps the request expects feedback from Google that is not being received. This issue seems to be confounding JavaScript developers, with much discussion revolving around jQuery instead.
Your assistance is greatly appreciated!