我已经做了几个小时的研究,只是找不到我需要的答案。抱歉,如果有人问这个问题,我一直在我的研究不好,如果是这样,只要链接有用的堆栈溢出页,我会在我的快乐的方式。这是我问题的摘要。
我在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/>");
}
正确设置配置的位置。
现在我正在做我的最后一个项目it react.js,必须从同一个服务器请求。我想使用内置的fetch系统,但它抛出cors错误,我也不知道如何添加前面提到的用户名、密码、数据库和主机名。我已经彻底地浏览了mdnwebdocs(可能是请求头、凭据、模式或完整性?),但是除了它之外,没有发现更多的内容说明是否必须将自己添加到服务器上的accesscontrolalloworigin(但是我不能编辑我学校服务器的设置)
如何添加这些凭据?我会继续得到一个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;
1条答案
按热度按时间l3zydbqr1#
cors在默认情况下是启用的
fetch
,但您的服务器需要配置为处理跨源请求。假设学校的服务器运行的是apache,您应该可以通过向php目录中添加一个.htaccess文件来实现这一点。只需命名文件
.htaccess
并添加以下行。这需要将apache服务器配置为允许在
DocumentRoot
. 这个DocumentRoot
是apache托管的根目录。例如,假设您从/var/www/example
目录。/var/www/example
是文档根。在apache配置example.com中
AllowOverride
指令必须设置为允许.htaccess
文件覆盖基本配置-否则.htaccess
文件被忽略。为了使apache能够控制和修改http请求和响应头
mod_headers
必须启用模块。从终端输入以下命令。如果所有这些都失败了,您可以尝试用php编辑响应(来自服务器)http头,方法是在php脚本中添加以下行-可能在其他行之前的顶部。