Cross-Browser Compatibility Issues with OCI SDK for JavaScript and Fetch API
I'm attempting to set up I'm stuck on something that should probably be simple... I'm converting an old project and I tried several approaches but none seem to work. During development of a hackathon project, I integrated the OCI JavaScript SDK to manage resource operations. The goal is to ensure full compatibility across Chrome, Firefox, and Edge. However, I'm running into issues specifically with the Fetch API when trying to retrieve objects from OCI Object Storage. My initial approach involved using the basic Fetch syntax: ```javascript fetch('https://<your-bucket-name>.objectstorage.<region>.oraclecloud.com/n/<namespace>/<object-name>', { method: 'GET', headers: { 'Authorization': 'Bearer ' + <your_token> } }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('There has been a problem with your fetch operation:', error)); ``` This worked well in Chrome, yet in Firefox, I noticed an unexpected CORS error: ‘Access to fetch at <your-url> from origin <your-origin> has been blocked by CORS policy.’ I double-checked the CORS configurations in the OCI console, ensuring that the required origins were added. To troubleshoot, I switched to using XMLHttpRequest to see if it would yield different results: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://<your-bucket-name>.objectstorage.<region>.oraclecloud.com/n/<namespace>/<object-name>', true); xhr.setRequestHeader('Authorization', 'Bearer ' + <your_token>); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.responseText); } else { console.error('Request failed with status:', xhr.status); } }; xhr.onerror = function() { console.error('Request error'); }; xhr.send(); ``` While this worked on Firefox, I ran into the same CORS problem in Edge. I also tried adjusting the `Access-Control-Allow-Origin` header in the OCI Object Storage settings, but the changes didn't seem to take effect immediately. Any suggestions on how to handle cross-browser compatibility for this scenario while using the OCI SDK? Are there any specific configurations or best practices for handling CORS in OCI that I might be missing? This is part of a larger API I'm building. I'd really appreciate any guidance on this. I appreciate any insights! This issue appeared after updating to Javascript stable. Any ideas how to fix this? This is happening in both development and production on Ubuntu 20.04. What would be the recommended way to handle this? How would you solve this?