CORS errors in Rails 6

and Action Text with Google Cloud Storage

Hash tags: CORS Active Text Ruby on Rails

Back
Today I first time ran my Web Portfolio Application online using Heroku as a cloud platform. It took me 24 builds to successfully deploy it( not including SSL in consideration). Everything was looking good and surprisingly suspicion :D.
Well yes something did went wrong and it was Google Storage which was throwing  error each time I tried to attach an image with Active Text. 
Access to XMLHttpRequest at 'long ling to google API' from origin 'My web site' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Fix:
  1. Make sure you have google token in your ENV or secret file configured and ready. I assume it's already working so go to next step.
  2. Install gsutil by following this guide - https://cloud.google.com/storage/docs/quickstart-gsutil
  3. Go to the location where Google SDK installed and create a new JSON file and call it whatever you like - I will call it as google suggesting - cors-json-file.json. Technically the file can be located anywhere I also copied it over to my rails app just in case to have the reference.
[
  {
    "origin": ["https://your domain name"],
    "responseHeader": ["Content-Type", "Content-Md5"],
    "method": ["GET", "HEAD", "DELETE", "PUT", "POST", "OPTIONS"],
    "maxAgeSeconds": 3600
  }
]
You also might want temporarily change maxAgeSeconds: 1 to force API refresh changes quicker
  4. Open terminal, navigate to SDK folder and run following command:
gsutil cors set cors-json-file.json gs://example-bucket
where cors-json-file.json is our file which we created in step 3 and example-bucket is a google bucket name
  5. Make sure that changes applied properly by using:
gsutil cors get gs://example-bucket
  6. It's time to try it out. Google API now should generate Access-Control-Allow-Origin header for us:
GOOGLE DOCS:
https://cloud.google.com/storage/docs/configuring-cors
https://cloud.google.com/storage/docs/quickstart-gsutil
Back

PROJECTS

MORE BLOGS