codesandbox / codesandbox/codesandbox-client
Linking some CDN resources in index.html w/o crossorigin or with crossorigin="anonymous" results in opaque error
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
Linking some CDN resources in index.html w/o crossorigin or with crossorigin="anonymous" results in opaque error
Error:
The FetchEvent for "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors
for
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
Solution:
use crossorigin attribute to specify the subdomain of your app on csb.app
Example:
https://wv2n7.csb.app/
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by opening the affected index.html and reproducing the Bootstrap CDN request at the linked csb.app example. Compare the link's crossorigin behavior with the reported opaque FetchEvent error, then verify that the resource loads without the network error and its integrity check remains effective.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100