header("访问控制允许来源："); 不工作 CORS 策略，预检请求不允许重定向

Question

I have tried many things but I keep getting an error. I try to fix

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

Now I read this file:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

It's hard to understand because I'm a beginner

And add to my php file:

header("Access-Control-Allow-Origin: **http://mywebsite.nl/login.php**");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

( "http://mywebsite.nl/login.php" , I changed my website name to mywebsite)

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

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$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);

This is my signin.js file.

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>
    );
  }
}

I read so many solutions that I don't understand it anymore.

Answer 1

I had the same problem and I solved it with two functions and a configuration on the server. Stop suffering and read this small solution: php-cors

Php CORS CORS To basically understand what cors are, I suggest that we see them as a mechanism used by clients such as browsers or any other interface that makes http requests to validate if the source of the request is compatible with the destination. This compatibility is defined by means of limitations or policies from the server or origin. If you want to know a more complete and technical definition, consult in: HTTP Access Control (CORS)

The following solution is to enable CORS in PHP using two functions:

• enableCors: Depending on your logic the call of this function would be done at the beginning of the execution, its scope is to detect the previous request of some clients such as browsers among others.
• cors: Returns an array with the configuration of the headers and the white list of sources that can make requests.

Note: If you are using Nginx you will also need to allow the OPTIONS method or do a little trick to change a 405 http code response to 200:

• 1: Detect if the request method is OPTIONS and set some headers and http response code.
• 2: Define a value for the 405 error code response.