302 redirects for all uploaded files

Google Cloud Compute Infrastructure
1

Hi all,

apologies for the potentially obvious question, but I am currently building a NextJS app.

I have a directory full of publicly accessible images. You can try one here: https://storage.cloud.google.com/business-guides.appspot.com/axminster_chamber_of_commerce/Yv9gYXejOwh4nlQfsnAK4SpgLyj1/01bb268a-4fba-4a3e-8556-74666851a692/WhatsApp-20Image-202022-09-07-20at-202.31.28-20PM.webp

I can upload files just fine. I can view files at that link above just fine from any browser if navigating there directly.

Within my app, I have img tags pointing at the above in the src parameter. You’d expect that to just work, but somehow it doesn’t.

Here is what appears to be happening: When accessing the image directly in browser, I get a 307 redirect ultimately leading to:

https://ffcfaff101b3b701fdfb0c86872bedf2a7e878279afd5be6afc881f-apidata.googleusercontent.com/download/storage/v1/b/business-guides.appspot.com/o/axminster_chamber_of_commerce%2FYv9gYXejOwh4nlQfsnAK4SpgLyj1%2F01bb268a-4fba-4a3e-8556-74666851a692%2FWhatsApp-20Image-202022-09-07-20at-202.31.28-20PM.webp?jk=ARTXCFGnb3_98qk8ihw7uOw_weDzmgGE9jEF2ho08-2zMzGHGtwg7HsfeQRlwM-aWcaMB1VRZeOA2Qouyb4_VGIQ-R43FTj3eeu2z2qpc1rXOWTku1E5267ugJGjdutELcp2uBJLL4DA4QwsQrLf5EypbwP1jWMLlQ3I2k7ee9uQIT8eAvgJrFJYt55MFD6XY8y4a6dxOASNPwE0J67fDksGZfxQ8NliOjFpXSG4jOWKD6DOEETsY8PXTONXc-5b_upY7EwCBeHvIpRa8W5zAVTFdIpisgxUagNnLeYgH1SR6cvso-8O2P81-V2w6zrVBmwSCE13cQ2u71etOrXgb8_FemfrEq1VZ71NTLw7V3n2rlNGgoX3E6RpDbW83aUGRXZkHzNxxR1olFGLsXqkU9mmBP-U-bY9PnbR5lTG-SquYp60SkOKOlvBOBPh-yFwjjN_r8sTtgB_ef9g1rZYeXeDtNjUvLyuvqEg_yB80cr2hDIfl7zCt94IHqsQ5pr959o8EIiVyYBULLs8w58ZVbSOwwfVMDuJ7SmPUmli2uLs6pSPJ9J37ynDBdkkouuA3042JDLDsFT6_LR6rBHH8amadeVVNt8Pzn-YhPWx9lCSkXslYj5mIFsERc1Ctip4U60nhnasB6CFVW29NjZgaOUETGHsWIhbeIk0Exnd5I3pCLT-wO5bNOuSDJKwgy8exLC9CNC-VPLCr0UuR2nFbnT140zwevo6JD4Yga3OGYMJdaJPwakdvuGiHbvhdNxo-H4d61Hz7vmN1YJqxn54wz3Jcdbqhsi_wQC_VqaplG1FzsLvq4-RP6Wl57Ox_u3WZAt9gbU5wT6SFEQUkSgVL33KvWz2qTFa6Sre8dCSo68PeZPV0ruMXQXJd_Pjq70CBsBxFNbWfS0zuMfM8gKF3OnL1eqPoLep0z1VaOU51-4KWw8aplz0oJkqMGYgBkOjY8CvM7B1yGaa_xmuPh0cAcnnDi9bHMlDKNxZAbofLwZKQUpay_KXqbeZfyGwE474XzR2glB6Oc1TBjiGZ2rn6osOsBzqhGDsNZpxeAMK7xsyOA95ATjr_zyoPpoVNQDfOC6hcTQcnySvnfm-Vh3A1iGUg0TY7yW1kuzrBEoS3Y8ZdmayYLUJKWmuFMp7eUg22_PiidfT-C6t3Sptkq3Fy5KIkmjO1pSQNOhyamOEyZ6PZuFS0CBWoGAFrGqr_bpOhdgI-R8WY1uIxwzJX7NkLqkzFbI_UWYAHOIh1SfNx5pjZP7jgV3LAirH0eQRubEpmME50F-d166ZhKePQqrRy10_m7J1ZBU_ST2WYeupW0tssOgjLUz7CSQFkoW4pMQbBoO_zdTgSl0LbwlIrvM8hN5qKiybjtXE1PkuXBNVPg&isca=1

While in my app I get a 302 redirect to a URL starting with: https://accounts.google.com/ServiceLogin?service=cds&passive=1209600&continue=https://storage.cloud.google.com/business-guides.appspot.com/axminster_chamber_of_commerce/Yv9gYXejOwh4nlQfsnAK4SpgLyj1/01bb268a-4fba-4a3e-8556-74666851a692/WhatsApp-20Image-202022-09-07-20at-202.31.28-20PM.webp&followup=https://storage.cloud.google.com/business-guides.appspot.com/axminster_chamber_of_commerce/Yv9gYXejOwh4nlQfsnAK4SpgLyj1/01bb268a-4fba-4a3e-8556-74666851a692/WhatsApp-20Image-202022-09-07-20at-202.31.28-20PM.webp

If you copy that into your browser, it will eventually lead to the same place that the 307 redirect above leads to.

So, it would appear that image files in my html are treated differently and I just can’t figure out why. Any ideas? I’d be most grateful for any help.

2 Likes
2

Hi @clouduser1 ,

Welcome to the Google Cloud Community!

If your image is publicly available, try changing the URL to this format when you are using it in your img tag:

https://storage.googleapis.com/STORAGE_EXAMPLE/OBJECT_EXAMPLE

Read more about Making Data Public and Accessing Public Data.

If that doesn’t work, you can read more about Working with Images in Next.js. You can try using the Image component in using images for your application. Try reading this documentation about the use of the Image tag.

To use external sources as your images, you must specify which domains are allowed in your project. You can do this by adding the domain in your next.config.js module in your project.

You can also check out these related Stack Overflow post: External URL images not loading in Next.js.

You can also get in touch with Google Cloud Support if the above option doesn’t work.

Let me know if it helped, thanks!

1 Like
3

Hi there,

Thank you so much!

It was a combination of using storage.googleapis.com and also changing the rules for my bucket from:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /filename {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

to:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
2 Likes