has been blocked by CORS policy

Door werner g op 16-12-2021 15:39

4.840 views

Via react native maak ik een app. De inloggegeven sla ik op bij de database van mijn webhosting. Hiervoor heb ik een api in php geschreven en die draait nu ook in productie bij hostnet. Als ik de app test (via google chrome) en de signup gegevens invul krijg ik deze foutmelding. De http heb ik onherkenbaar gemaakt.

Access to fetch at 'http//..........login.php' from origin 'http://localhost:*******' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Als lake weet ik niet zo goed wat ik nu moet doen. Na een paar dagen zoeken via google krijg ik zoveel zoekresultaten/vragen/oplossingen dat ik 'door de bomen het bos niet meer zie'. Veel CORS foutmeldingen lijken op elkaar en antwoorden zijn vaak verschillend.

Oplossingen die ik zelf gevonden heb:
- Kan/moet ik CORS policy uitschakelen? volgens mij mag dat niet ivm beveiliging
- Moet ik nog een server in de frontend maken met node.js? Is dit voor mij van toepassing?
- Moet ik een CORS plugin installeren voor google Chrome? (volgens mij los ik het probleem hiermee niet op)
- In de file index.php moet ik het onderstaande zetten met een paar aanpassingen. (ik heb alleen db.php, signup.php en login.php)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Hopelijk kan iemand mij hiermee verder helpen.

- Ariën -

23-12-2021 14:46

Dat moet je alles toestaan.

w werner g

23-12-2021 15:06

Met alleen * krijg ik nog steeds dezelfde foutmelding.

In mijn login.php heb ik dit staan:
header("Access-Control-Allow-Origin: * ");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json");

Zou ik dan het onderstaande aan moeten passen?
header("Access-Control-Allow-Origin: * ");
header('Access-Control-Allow-Methods: ~~GET,~~ POST~~, OPTIONS~~');
header("Access-Control-Allow-Headers: Content-Type, ~~Authorization"~~);
~~header("Content-Type: application/json");~~

En dit
application/x-www-form-urlencoded with a parameter named json (or whatever) verwerken in mijn signin.js script?

- Ariën -

23-12-2021 15:42 gewijzigd op 23-12-2021 15:43

Ik denk eerder dat je CORS kan laten vallen, want wil je dat iemand vanaf een andere host een request naar jouw loginscript mag doen ongeacht je de boel goed dichtgetimmerd zal hebben?

Want de requests komen vanuit een app, en dus heb je geen controle over de hosts die gebruikt worden.
Je kan ook met een soort token-systeem, zoals CSRF, werken als je dit wilt beveiligen.

Hoe je dat in een native React-app inbouwt, moet je even uitzoeken. Ik ben niet bekend met React als framework.

w werner g

23-12-2021 15:47

Bedankt dan ga ik dat proberen

Reageren

Inloggen om te reageren