Develop Reference

CORB: Cross-Origin Read Blocking on JSFiddle

I added https://unpkg.com/htmx.org#1.3.3/dist/htmx.min.js.gz to my jsfiddle, but now I get:
CORB: Cross-Origin Read Blocking
Is there a way to work around this?
JSFiddle: https://jsfiddle.net/thomas_guettler/7cLy8m5u/3/
Code:
<button
hx-get="https://raw.githubusercontent.com/guettli/html-fragments/main/fragments/simple-div.html">
Press me
</button>
If I use this URL: https://unpkg.com/htmx.org#1.3.3/dist/htmx.min.js
then I get
Access to XMLHttpRequest at 'https://raw.githubusercontent.com/guettli/html-fragments/main/fragments/simple-div.html' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I found a work-around.
If I use a mocky endpoint, then it works.
For example: https://run.mocky.io/v3/6f4b9b4c-4ac9-44e0-89fa-da7d222346df
I guess this http header in the response of github makes the browser reject the snippet:
Referrer Policy: strict-origin-when-cross-origin

Confusing CORS errors and how to use a CORS proxy

So I've been working on an in browser program that uses fetch to get some data from an api, and because the api only returns data in chunks I need to send a total of 70-100 requests, one after another at about 5/second. However about 50% of the time I get a CORS error:
Access to fetch at 'https://api.hypixel.net/skyblock/auctions?page=49&key=7a5825e3-2d47-4ff4-894f-7fd2a6c9ca17' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Strangely enough, when it does happen, the error seems to occur at a random point through the 80 or so requests. I understand the concept of a CORS proxy but I cannot figure out how to use it in practice. Could someone explain how to use any of the CORS proxy websites to avoid this error.

Did you add this to your package.json:
"proxy": {
"*":{ "target" : "http://myurl"}
}
And set headers like:
axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

CORS blocked origin - Origin and allowed origin are the same

Using dockerized Ory Kratos and Angular (www folder hosted via nginx to be able to modify headers) on localhost and trying to execute
const headers = {
Accept: 'application/json',
};
fetch('http://127.0.0.1:4433/self-service/registration/browser', {
method: 'GET',
headers,
redirect: 'follow',
credentials: 'include',
})
.then((r) => console.log(r))
.catch((f) => console.log(f));
leads to
Access to fetch at 'http://127.0.0.1:8100/auth/register?flow=b35c3f9a-5592-4121-80b9-87503c38e1d3' (redirected from 'http://127.0.0.1:4433/self-service/registration/browser') from origin 'http://127.0.0.1:8100' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8100' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
http://127.0.0.1:4433/self-service/registration/browser redirects to http://127.0.0.1:8100/custompath/register?flow=[some-flow-id] via a 302 HTTP response. The browser tries to resolve the redirect and throws the error mentioned above.
Origin and allowed origin are the same - so how can that error happen? I already found this answer on stackoverflow: https://stackoverflow.com/a/62320912/14345380 if that's helpful.
Chrome version 87.0.4280.88
Edit #1
Network tab output can be seen
here
Edit #2
To be able to resolve the issue yourself I set up a little repository: Find it here
Edit #3
Thanks for the hint from pandamakes. The test repo is not running on :8100 but on 4200 (Switched from ionic project to angular project).
Edit #4
I started another discussion at the ory/kratos project origin here. The Ory Team implemented a SDK which we can use instead of plain fetch requests.

One thing is simply add no-cors to the request.
mode: 'no-cors'
Also, you say you have Access-Control-Allow-Origin header set did you also set Access-Control-Allow-Credentials: true , since you are fetching with credentials: "include".
Lastly setting credentials: "include" origin can not be a localhost or 127.0.0.1 or it will return false and cause a cors error, so either, set credentials to same-site or omit or get yourself a domain name.

I ... think I got it...
The 302 redirection works, but when the fetch requests follows the redirection, it now attempts at fetching a non-cors resource. In this event, it will not attach an Origin request header (since it is a non CORS request).
When the response arrives, the browser will compare access-control-allow-origin header, if any exist, to the origin of the request. If the response header exists, and is not *, it must match the origin header of the request.
So solve your issue, you will want to remove the access-control-allow-origin in your nginx setup, or set it to *
min repro: https://github.com/xgui3783/cors-min-repro

javascript: fetch blocked by CORS policy because of wildcard

I am trying to use the following api endpoint using fetch:
https://api.guerrillamail.com/ajax.php?f=check_email&ip=${ip}&agent=${agent}
(outdated documentation)
When I set credentials: 'include' I get the following error:
Access to fetch at 'https://api.guerrillamail.com/ajax.php?...' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
I have to set the flag in order to submit a cookie for authentication.
After googling this problem for 1++ hour, my understanding is the following:
CORS has to be server side allowed to be able to make "none simple" request to an other domain e.g. localhost => guerrillamail.com to prevent abuse, a variable Access-Control-Allow-Origin has to be set to the domains that should be allowed to send requests. A valid option is "*", which means that ALL origins are ok.
For some reason it is not ok though in combination with the credentials: 'include flag.
Do you have any ideas why this wouldnt be allowed?
Do you know what I have to do, in order to to do the request?
And is my understanding about this correct?

The documentation you're referencing no longer applies. In that old documentation, the API was made available over HTTP rather than HTTPS. CORS doesn't apply to HTTP and wouldn't have been a problem.
In the latest documention, that API is provided over HTTPS. To deal with the CORS requirement, they also removed the need for cookies, changing it to subscr_token and sid_token parameters sent as part of the request:
version 1.5, 30th May 2011
- Removed the requirement for cookies, added subscr_token and sid_token parameters

CORS issue between UI and couchDB

I have CORS issue between UI and couchdb.
But in couchdb CORS is enabled, and UI has res.header("Access-Control-Allow-Origin", "*"); header.
But I still have an error
XMLHttpRequest cannot load http://localhost:5984/cp_display_template/.
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin'
header when the credentials flag is true. Origin 'http://localhost' is
therefore not allowed access. The credentials mode of an
XMLHttpRequest is controlled by the withCredentials attribute.
Someone has an idea why?

Not 100% sure about this but try instead using * use localhost:5984 in Access-Control-Allow-Origin header. because for some security reason you can allow all requests. need to indicate specific domain