Api notez

<div class="main">
There are tons of web sites with public API that we could
access, but most of them use the default CORS security
setting (by not setting <b>Access-Control-Allow-Origin</b>)
which means we can only access their API from the
command line or from the server and not from the browser
<a href="https://code-maven.com/cors">[1]</a>.

<hr>
So you can only use an API from your browser if
the API has Access-Control-Allow-Origin enabled.

<hr>
CORS proxies let you bypass the security restrictions that CORS applies, with just a tiny change of URL.
Rather than the browser sending a request to the target server directly, it sends the request to a CORS proxy with the target URL, which might look like https://corsproxy.example/https://other.example (using the target URL as a path).
The CORS proxy then forwards the request to the real server, and then returns the response plus the correct CORS headers.

From the browser's point of view, any request via the proxy is just a request to the proxy's origin which does seem to support CORS. It's not aware you're talking to the real target address at all.
Of course, this only works for publicly accessible sites, which the CORS proxy can directly access from wherever it's hosted.

Caution:
The CORS proxy can read and do anything with the full request & response of all traffic through it .
Don't use public proxies for for sensitive data exchange
<a href="https://httptoolkit.tech/blog/cors-proxies/">[2]</a>.


Same-Origin Policy
a different domain (eg. site at example.com calls api.com)
a different sub domain (eg. site at example.com calls api.example.com)
a different port (eg. site at example.com calls example.com:3001)
a different protocol (eg. site at https://example.com calls http://example.com)



Cross-Origin Resource Sharing (CORS)
CORS is a mechanism which gets triggered, when you make a request that does not comply to the rules mentioned above.
It protects your data and the data on the site you’re calling.
For example, CORS can prevent attackers that use malicious scripts on websites/ads
(and try to access your bank credentials and make transactions on your behalf).


Access-Control-Allow-Origin
This header is meant to be returned by the server.
It indicates what client-domains are allowed to access its resources.
The value can be: * (allow any domain) or specific qualified domain
Sometimes the lack of proper headers is result of wrong client-side implementation (eg. missing API key).
<a href="https://medium.com/@baphemot/understanding-cors-18ad6b478e2b">[3]</a>

Fixing CORS "error"
Local fix
Use an extension to temporary make your browser ignore the CORS mechanism
<a href="https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino">Chrome extension</a>
<a href="https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/">Firefox addon</a>
These will disable the mechanism for every website for the duration of your whole browser session. Use with caution.

Durable fix
Use a CORS proxy
•https://api.codetabs.com/v1/proxy?quest=
•https://api.allorigins.win/raw?url=
•https://cors.krishan.workers.dev/?
•https://cors.kawiesh.workers.dev/?




//------------
//----------DOM PARSER
**assuming d is retrieved from r.text()
let document= new DOMParser().parseFromString(d,"text/html");



------


//POST
fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("[email protected]&password=pw")
})


let options= {
method: "POST",
body: new URLSearchParams(`key=${value}`)
}


let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');
let options= {
method: "POST",
body: formData
}


fetch(url, options)
.then(r=> r.json())
.then(d=> {
//Do sth
})
.catch(x=> alert(x));




//------FETCH WITH FALLBACK

let url= ".....";

fetch(url)
.then(r=> r.clone().json().catch(() => r.text()))
.then(d=> {
//DO SOMETHING
}).catch(x=> alert(x));