Использование Fetch в реакции, требуется пароль для доступа к базе данных

Question

Я часами изучал это и просто не могу найти ответ, который мне нужен.Извините, если меня об этом спросили, и я провалил свои исследования, если это так, просто свяжите полезную страницу переполнения стека, и я буду счастлив.Вот краткое изложение моей проблемы.

Я учусь в классе CS4, и мы разрабатываем собственную веб-страницу и должны использовать сервер нашей школы для хранения базы данных.Мы узнали php и как использовать mySQL, и наши запросы POST и GET для сервера выглядели бы так (написано на PHP):

require("config.php");

$db = new PDO("mysql:dbname=" . $GLOBALS["database"] . ";host=" . $GLOBALS["hostname"] . ";port=" . $GLOBALS["port"], 
$GLOBALS["username"], $GLOBALS["password"]);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$query = "SELECT * FROM Karrsen_ajaxtest"; 
$statement = $db->prepare($query);
$statement->execute();
$rows = $statement->fetchAll();
foreach ($rows as $row) {
    print(strip_tags($row['name']) . "<br/>");
}

Где конфигурация была установлена ​​правильно.

ТеперьЯ делаю мой последний проект React.js и должен запросить с того же сервера.Я хочу использовать встроенную систему Fetch, но она выдает ошибки CORS, и я также не знаю, как добавить вышеупомянутое имя пользователя, пароль, базу данных и имя хоста.Я тщательно просмотрел MDN-webdocs (подумал, что это может быть заголовок запроса, учетные данные, режим или целостность?), Но не нашел ничего, кроме того, что сказано, нужно ли добавлять себя в Access-Control-Allow-Origin на сервере (но я не могу редактировать настройки своего школьного сервера.)

Как мне добавить эти учетные данные?Буду ли я продолжать получать ошибку CORS.Извините, если это пустая трата вашего времени, не слишком много знаете о переполнении стека

* РЕДАКТИРОВАТЬ У меня есть приложение реагирования, в котором мой единственный компонент прямо сейчас будет частью входа в систему.Это называется Login.JS.Прямо сейчас все, что я хочу, это получить данные из базы данных при отправке формы.Вот мой код.

import React from 'react';

class Login extends React.Component{
  constructor (props) {
    super(props);

    this.state = {
        userName: "",
        password: "",
        hits: [],
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = event => {
    this.setState({
        [event.target.name]: event.target.value
    });
  }

  handleSubmit(e) {
    console.log(e);
    e.preventDefault();
    this.updateFromDB();
  }

  formValidation() {
    return this.state.password.length > 0 && this.state.userName.length > 0;
  }

  updateFromDB(){
    let API = "THE_URL_FOR_MY_DATABASE";
    let query = "SELECT * FROM karrsen_test";
    fetch(API + query, {
        method: 'POST',
        mode: 'cors'
    })
    .then(response => response.json())
    .then(data => this.setState({ hits: data.hits }));
  }

  render (){
    return(
        <div className= "Login-form">
            <form onSubmit = {(e) => this.handleSubmit(e)}>
                <label>
                    Username:
                    <input 
                    type = "text" 
                    value = {this.state.userName} 
                    onChange = {this.handleChange} 
                    name = "userName"/>
                </label>
                <label> 
                    Password:
                    <input
                    type = "text"
                    value = {this.state.password}
                    onChange = {this.handleChange}
                    name = "password" />
                </label>
                <input 
                    disabled = {!this.formValidation()}
                    type = "submit" />
            </form>
        </div>
    )

  }
}

export default Login;

Answer 1

CORS включен по по умолчанию с fetch, но ваш сервер должен быть сконфигурирован для обработки перекрестных запросов.

Предполагая, что на сервере вашей школы работает Apache, вы должны сделать это, добавив файл .htaccess в каталог PHP. Просто назовите файл .htaccess и добавьте следующую строку.

Header set Access-Control-Allow-Origin "*"

Для этого требуется, чтобы сервер Apache был настроен для разрешения переопределений в DocumentRoot. DocumentRoot является корневым каталогом, который размещает Apache. Например, предположим, что вы используете example.com из каталога /var/www/example. /var/www/example - это DocumentRoot.

В конфигурации Apache для example.com должна быть установлена ​​директива AllowOverride, чтобы позволить файлу .htaccess переопределять базовую конфигурацию - в противном случае файл .htaccess игнорируется.

Чтобы Apache мог контролировать и изменять заголовки HTTP-запросов и ответов, модуль mod_headers должен быть включен. С терминала введите следующую команду.

a2enmod headers

Если ничего не помогло, вы можете попробовать отредактировать HTTP-заголовок ответа (с сервера) с помощью PHP, добавив следующую строку в ваш PHP-скрипт - вероятно, вверху, прежде чем что-либо еще.

header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");