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.
Als de doelhost jouw host is, dan kan je inderdaar CORS toestaan met de hostname van je Origin.
Zie ook: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Dit kan je ook in .htaccess regelen

De developer-console van je browser kan je prima gebruiken om te kijken welke headers je terugkrijgt gestuurd bij een aanroep.

Ik heb de info in de link doorgelezen maar dat is voor mij nog erg technisch. Hierdoor begrijp ik nog niet helemaal wat je bedoeld. De php scripts heb ik in de map httpdocs staan, ik zie geen .htaccess.

In DEVTOOLS staat ook deze error: "POST" http://.......login.php net::ERR_FAILED
Betekent dit dat ik POST moet toestaan?

Zou ik dan het onderstaande in login.php moeten zetten?

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
Als je jan-en-alleman een request wilt laten doen, dan kan je dat proberen.
"Als je jan-en-alleman een request wilt laten doen"

Bedoel je hiermee dat dit ook een oplossing is voor een signin/registratie pagina van een app.
Of wil je hiermee aangeven dat de beveiliging van je database dan zo lek als een mandje is.
Ga zelf eens na of www.randomdomeinvaniemand.nl ook een aanroep mag doen naar je scripts via een AJAX-request.


Verder heeft CORS niks te maken met je database.
De reden dat ik deze vraag stel op dit forum is omdat ik geen kennis heb van php, ajax request, CORS etc. Ik probeer een app te ontwikkelen waarvoor ik een database nodig heb. React-native, Kotlin, java, python talen begrijp ik redelijk maar dit totaal niet.

"Ga zelf eens na of www.randomdomeinvaniemand.nl ook een aanroep mag doen naar je scripts via een AJAX-request."

Lijkt me niet, maar het zegt me ook niks. Zou je me willen helpen om het werkend te krijgen?
Is het niet handig om zelf wat ervaring op te doen? Jij bent ook diegene die de app moet onderhouden en beslissingen moet nemen.

De uitleg over CORS staat al helder beschreven in de link van Mozilla in dit topic. Met Origin kan je bepalen wie een request mag doen.
Dat is inderdaad wel makkelijker. Ik heb de tekst naar het Nederlands vertaalt maar ik blijf nog wel met een aantal vragen zitten. Wanneer iets onder Simple Request valt begrijp ik niet helemaal maar dat heb ik voorlopig ook niet nodig. Klopt het dat ik de https van mijn client/app bij 'Access-Control-Allow-Origin' moet zetten. Moet ik dan een eigen proxy maken met bijv Heroku -> en de https van deze proxy bij 'Access-Control-Allow-Origin' zetten?
'http://localhost:******* lijkt me niet goed als ook andere gebruikers zich willen registeren.

header('Access-Control-Allow-Origin: https://MIJN proxy' ipv *);
header('Access-Control-Allow-Methods: POST);
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Dit gaat over de registratie pagina.
Moet ik bij de inlogpagina (login.php) dit erbij zetten?
Access-Control-Allow-Credentials: true
Ik heb geprobeerd:

header("Access-Control-Allow-Origin: http://localhost:19006";);
header("Access-Control-Allow-Origin: http://localhost:19002";);
header("Access-Control-Allow-Origin: http://localhost:21";); poort hostnet
header("Access-Control-Allow-Origin: mijnwebsite.nl/LoginRegister/login.php");

Volgens mij moet ik de poort bij http://localhost:... zetten.
Weet je waar ik die kan vinden? Ik dacht dat het de eerste twee zijn, maar ik krijg steeds dezelfde Cors foutmelding.

Ik heb nu dit:

<?php
include('db.php');

header("Access-Control-Allow-Origin: http://localhost:19006");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json");

$UserEmail = $decodedData['Email'];
$UserPW = ($decodedData['Password']); //password is hashed

$SQL = "SELECT * FROM newuser WHERE UserEmail = '$UserEmail'";
$exeSQL = mysqli_query($conn, $SQL);
$checkEmail =  mysqli_num_rows($exeSQL);

if ($checkEmail != 0) {
    $arrayu = mysqli_fetch_array($exeSQL);
    if ($arrayu['UserPw'] != $UserPW) {
        $Message = "pw WRONG";
    } else {
        $Message = "Success";
    }
} else {
    $Message = "No account yet";
}

$response[] = array("Message" => $Message);
echo json_encode($response);



--------------------------------------------------------------------------------


import React, { Component } from 'react';
import { View, Pressable, Text, TextInput, TouchableOpacity, Button} from 'react-native';
import stylesin from '../../style';
import Feather from 'react-native-vector-icons/Feather';

export default class signin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email : '',
      password : '',
      check_textInputChange : false,
      secureTextEntry : true,
    };
  }

  InsertRecord=()=>{
    var Email = this.state.email;
    var Password = this.state.password;

    if ((Email.length==0) || (Password.length==0)){
      alert("Required Field Is Missing!!!");
    }else{
      var APIURL = **"http://mywebsite.nl/login.php"**;

      var headers = {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      };
            
      var Data ={
        Email: Email,
        Password: Password
      };

      fetch(APIURL,{
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Data)
      })
      .then((Response)=>Response.json())
      .then((Response)=>{
        alert(Response[0].Message)
        if (Response[0].Message == "Success") {
          console.log("true")
          this.props.navigation.navigate("HomeScreen");
        }
        console.log(Data);
      })
      .catch((error)=>{
        console.error("ERROR FOUND" + error);
      })
    }
  }

  updateSecureTextEntry(){
    this.setState({
      ...this.state,
      secureTextEntry: !this.state.secureTextEntry
    });
  }

  render() {
    return (
      <View style={stylesin.viewStyle}>
          <View style={stylesin.action}>
            <TextInput
              placeholder="Enter Email"
              placeholderTextColor="#ff0000"
              style={stylesin.textInput}
              onChangeText={email=>this.setState({email})}
              />
          </View>

          <View style={stylesin.action}>
            <TextInput
              placeholder="Enter Password"
              placeholderTextColor="#ff0000"
              style={stylesin.textInput}
              secureTextEntry={this.state.secureTextEntry ? true : false}
              onChangeText={password=>this.setState({password})}
              />
                <TouchableOpacity
                  onPress={this.updateSecureTextEntry.bind(this)}>
                  {this.state.secureTextEntry ?
                  <Feather
                  name="eye-off"
                  color="grey"
                  size={20}
                  />
                :  
                  <Feather
                  name="eye"
                  color="black"
                  size={20}
                  />
                }
                </TouchableOpacity>  
          </View>


                {/* Button */}

                <View style={stylesin.loginButtonSection}>    
                  <Pressable
                    style={stylesin.loginButton} 
                    onPress={()=>{
                      this.InsertRecord()
                    }}
                    >
                      <Text style={stylesin.text}>Sign In</Text>
                  </Pressable>
                </View>

                <View style={stylesin.loginButtonSection}>
                  <Pressable
                    style={stylesin.loginButton} 
                    onPress={()=>{
                      // this.InsertRecord()
                    }}
                    >
                      <Text style={stylesin.text}>Create new Account</Text>
                    </Pressable>
                  </View>
      </View>
    );
  }
}
Als een gebruiker via een app direct connectie zoekt, dan moet je normaliter elke host toestaan.

Welke poorten zoek je dan precies? En weet je zeker dat je wel 'localhost' wilt? Of doe je dat vanwege je proxy?

En waarom poort 21 van FTP? Die doet niks met HTTP-requests hoor.

Reageren