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错误吗？抱歉，如果这浪费您的时间，请不要对堆栈溢出了解太多

*编辑我有我的react应用，其中我现在唯一的组件将是一些登录信息。它称为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

default和fetch启用了CORS，但是您的服务器需要配置为处理跨源请求。

假设您学校的服务器运行的是Apache，那么应该可以通过将.htaccess文件添加到PHP目录中来做到这一点。只需将文件命名为.htaccess并添加以下行即可。

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

这要求将Apache服务器配置为允许DocumentRoot中的替代。 DocumentRoot是Apache托管的根目录。例如，假设您从/var/www/example目录托管example.com。 /var/www/example是DocumentRoot。

在example.com的Apache配置中，必须将AllowOverride指令设置为允许.htaccess文件覆盖基本配置-否则.htaccess文件将被忽略。

要使Apache能够控制和修改HTTP请求和响应头，必须启用mod_headers模块。在终端上，输入以下命令。

a2enmod headers

如果所有其他方法均失败，则可以尝试使用PHP编辑（从服务器）HTTP头响应，方法是将以下行添加到PHP脚本中-可能在其他任何内容的顶部。

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

使用Fetch in react，需要用户名密码才能访问数据库

1 个答案: