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

Question

我已经尝试了很多事情，但我不断收到错误消息。 我尝试修复

CORS 策略已阻止从源“http://localhost:19006”获取“http://mysite.nl/login.php”的访问权限：对预检请求的响应未通过访问控制检查：重定向未通过允许预检请求。”

现在我读了这个文件：

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

很难理解，因为我是初学者

并添加到我的 php 文件中：

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" , 我把网站名改成了 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);

这是我的 signin.js 文件。

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

我阅读了很多解决方案，以至于我不再理解它了。

Answer 1

我遇到了同样的问题，我通过服务器上的两个功能和一个配置解决了这个问题。 停止痛苦并阅读这个小解决方案： 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. 这种兼容性是通过来自服务器或源的限制或策略来定义的。 如果您想了解更完整的技术定义，请参阅：HTTP 访问控制 (CORS)

以下解决方案是使用两个函数在 PHP 中启用 CORS：

• enableCors：根据您的逻辑，此 function 的调用将在执行开始时完成，其 scope 用于检测某些客户端（例如浏览器等）的先前请求。
• cors：返回一个数组，其中包含标头的配置和可以发出请求的源的白名单。

注意：如果您使用的是 Nginx，您还需要允许 OPTIONS 方法或做一些小技巧来将 405 http 代码响应更改为 200：

• 1：检测请求方法是否为OPTIONS并设置一些headers和http响应码。
• 2：为 405 错误代码响应定义一个值。