Template image not showing in tab (if i use Cloudfront and S3)

@rodrigoflausino Hi there!

The method for setting up a CORS header will vary from host to host, so reach out to your web developer or hosting provider for help and send them this guide for context. You can also check out Amazon S3 CORS configuration user guide here: https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

OK, but how the cors function works in gallery (first tab), but not working for template image tabs? My images show in gallery, but the template images don’t show.

My CORS configuration:

https://selectgame.gamehall.com.br/wp-content/uploads/cors-selectgame.jpg

I will send this thread to my web developer, but i don’t know if this its host configuration =(

• This reply was modified 2 years, 1 month ago by Rodrigo Lima.

For a few seconds the image shows in template tab (when i add new template):

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/17161731/Erro-Stories-Template-Tab-01.jpeg

And few seconds later the image its gone, but the image uploaded to S3:

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/17161723/Erro-Stories-Template-Tab-02.jpeg

The new image template:

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/17155926/web-stories-page-template-167556.jpg

I added the “Header set Access-Control-Allow-Origin: *” in htaccess but not working.

Thanks for the details. Could you share the story URL so we can take a closer look?

If you open your browser dev tools on the templates page, do you see any browser console errors?

The problems its in internal WordPress editor. The published stories looks fine and don’t have problems today.

About browser errors its looks like this:

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/17182106/erro-debug-stories.jpg

In Network tab shows this in template image:

To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:

Cross-Origin-Resource-Policy: same-site

Choose this option if the resource and the document are served from the same site.
Cross-Origin-Resource-Policy: cross-origin

Only choose this option if an arbitrary website including this resource does not impose a security risk.

@rodrigoflausino Thanks for sharing. Perhaps you can check with your hosting provider to double check the CORS configuration as it seems the console errors are related. It looks like another user had a similar issue and detailed some steps to correct the configuration in this thread if you’d like to give it a try.

I tried the other solution and not working. Show the same problem:

GET https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/17125509/web-stories-page-template-167539.jpg net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

All template images created in this week don’t show any image.

I set the origin and try to clean cache, but not working

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/18144918/Config-Cloudfront-01.jpg

If i create an new template the image shows for only 5 seconds and its gone =(

This its very frustrating because i try to create new templates to update many stories in next weeks.

Edit: i record the problem today:

https://www.youtube.com/watch?v=iPZPEok8Gmw

Another question: the crossorigin=”anonymous” img tag set on image tab list and not have this tag in saved template list. I found this now and don’t know how to change this in plugin editor to test and confirm this.

I tried to insert this tag and picture shows again:

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/18215930/crossorigin-tab-template.jpg

The crossorigin shows in default template list but not in saved templates.

Hi there

You’re totally right, this crossorigin="anonymous" attribute is missing for saved templates! We’ll get this fixed.

Thanks!!! I will wait for future updates!

For CORS configuration, i change some variables and attributes in Cloudfront and S3 and looks fine for now. I added the Cross-Origin-Resource-Policy with cross-site value. I use the @luckynasan suggestion (for other thread).

Cloudfront –> Distributions -> Origins -> Edit Origin

Cross-Origin-Resource-Policy: cross-site
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: Origin, X-Request-Width, Content-Type, Accept
Access-Control-Allow-Origin: my_domain_origin_url.com

Note: this its an example and i’m very begginer developer about this configuration. Other editors will try other configs.

Hi! I installed the 1.26 and the crossorigin its worked!

Template tab Web stories

View post on imgur.com

I doing more tests in this weekend!

Thank you so much for your confirmation @rodrigoflausino. Really glad to hear it has been resolved!