Blocked by CORS policy

[ApertureDevelopment]

Are you experiencing an issue with...

• shields.io
• My own instance
• gh-badges NPM package

🪲 Description

When I try using the badges in a Steam addon description, I get this error and the badge doesnt show up:

Access to image at 'https://img.shields.io/github/issues-raw/Aperture-Development/MSync-2.png' from origin 'https://steamcommunity.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

🔗 Link to the badge

https://img.shields.io/github/issues-raw/Aperture-Development/MSync-2.png

Steps for reproduction:

1. Generate a badge
2. Add it like this: [img]{badge}[/img] to your addon description

[paulmelnikow]

Hi, thanks for the report. I don’t see any reason we couldn’t add CORS headers.

[ApertureDevelopment]

When will that be fixed?

[paulmelnikow]

The maintainers and contributors all work on this project in their spare time, so there’s no timeline I’m afraid! This is a community project; anyone who is interested in trying to solve the problem is welcome to. The maintainers are happy to provide guidance and review code. (If you don’t want to or aren’t able to, no worries! Maybe someone else will come along and work on it.)

In terms of technical advice, I’ve used the cors package before, which is the standard way to go about this. Though I’ve never done it with Scoutcamp (that’s the web framework Shields uses) and I’m not sure if there is a CORS handler built in. The relevant bits of code would probably belong in core/server, and a corresponding test would belong there as well.

[paulmelnikow]

It may also be worth researching whether anything has to be configured in Cloudflare for CORS.

[chris48s]

I think all the other headers we set are passed through by CloudFlare without having to whitelist them. The same-origin policy is implemented in the browser sandbox, so we should only need to add the header.

[jcxldn]

We should just be able to add Access-Control-Allow-Origin: * as a header to every request.

CloudFlare, no matter what settings you set, will not interfere with CORS, and will pass it through unaltered.

[paulmelnikow]

Fixed in #4171 🎉