Chyba Access-Control-Allow-Headers. – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím. Našel by se tady nějaký programátor, který by mi byl ochoten poradit s chybou při volání na API?

Jedná se o api platformy pro tvorba e-shopu. Potřebuji dostat výpis posledních sta objednávek, který se uloží jako proměnná "y". Kód funguje, ale ne v prohlížeči. Pokud tento kód uložíte jako html a spustíte, konzola vám vyhodí chybu Access-Control-Allow-Headers. Netuším co s tím budu vděčný za každou radu. Předem děkuji.

<script src="./request.js"></script>
<script>
let x;
let y;
request({
method: 'POST',
url: 'https://api.webareal.cz/login',
headers: {
'X-Wa-api-token': 'token'
},
body: "{ \"username\": \"jmeno\", \"password\": \"heslo\"}"
}, function (error, response, body) {
x = body.substring(10, 1237);
getdata();
});
function getdata(){
request({
method: 'GET',
url: 'https://api.webareal.cz/orders?limit=100&sortBy=id&offset=10',
headers: {
'X-Wa-api-token': 'token',
'Authorization': `Bearer ${x}`,
}}, function (error, response, body) {
y = JSON.parse(body);
console.log(y);
});
}
</script>

Když se připojuješ na jinou doménu (cross origin), tak prohlížeč nejdříve pošle "preflight request", ve kterém cíl požádá o svolení; řekne co se chystá poslat a zkontroluje, co je server ochoten přijmout.

Je to OPTIONS request a měl by být vidět v nástrojích pro vyvojáře. Tak se podívej, co ti tam lítá.

#2 gna
díky. Díval jsem se do nástrojů a našel jsem že první request byl úspěšný a druhý mi hlásí CORS(cross origin) error, ale pořád nevím co s tím. Napadá mě přidat nějaký header k druhému requestu.

Já nevím, jak to mají implementované, ale typicky se u preflightu neřeší, jestli něco chybí. Spíš posíláš něco, co oni nedovolují. A podle dokumentace to máš asi správně. Podívej se na detail toho OPTIONS, co je v dotazu a co v odpovědi. Dost možná to záměrně nemá fungovat přes web.

Access-Control-Request-Headers
Access-Control-Allow-Headers

#4 gna
odpověď je prázdná. Jediné co vidím jsou moje headry a čas. Takže myslíš, že to nepůjde?

Když login funguje, tak by asi měl fungovat i zbytek. Nevím.

Já se přes login nedostanu, tak orders nevyzkouším.

#6 gna
jasne. Zkouším to teď přepsat za použítí XLMHttpRequestu přesně tak jak mají v dokumentaci. Vrací mi chybu Origin null is not allowed by Access-Control-Allow-Origin. a to u loginu i u orders. Testuju z lokálního souboru, nemám spuštěný web server.

On se vlastně login indikuje jen tím tokenem, takže na tom asi nesejde.

A jinak mi to vrací toto:

Access-Control-Allow-Headers: DNT, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Content-Type, Cache-Control, X-Wa-api-token, X-Wa-ssid
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *

Takže není povolená ta hlavička Authorization.

#8 gna
Ale bez ní to hlásí chybu že dotaz musí obsahovat header Authorization a mají ji i v dokumentaci.

#9 marioDD
Jo, podle dokumentace to máš správně. To je na tom to divné, proč to přes wen funguje jen na půl (login a pak nic).

#10 gna
ještě divnější je že když to napíšu v node.js a spustím na repl.it(online IDE) tak mi to funguje úplně v pořádku 

A neběží repl.it na serveru, takže se tam prohlížečový CORS vůbec neřeší?

Ono jako dává smysl, aby to nefungovalo. Mít přihlašovací údaje někde ve skriptu na potenciálně veřejném webu je samozřejmě nesmysl, ale pokud tomuhle chtějí zabránit, tak bych čekal, že nebude fungovat ani ten login.

#12 gna
ale jde mi o to, že by ten server neměl přijímat hlavičku Authorization vůbec, ale z node.js je to v pořádku.

To neznamená, že server tu hlavičku nepřijímá, ale že nechce, aby prohlížeč požadavky s touto hlavičkou dovolil. Serverový node.js na acces-control asi kašle a nejspíš preflight vůbec nedělá.

V téhle formě si myslím, že to nepůjde, ale jestli máš v dokumentaci příklad s XHR, tak nějak jinak asi jo.

#16 gna

Dobře ještě to zkusím přes XHR. Díky moc za pomoc a tvůj čas.