reactjs 将axio提取到localhost数据库时的React Js问题

cl25kdpy 于 2022-12-29 发布在 React

关注(0)|答案(2)|浏览(136)

我正在用react + spring建立一个个人项目，现在我在我的网站的登录页面上工作。我试着检查是否在localhost数据库中（这是在datagrip与postgres中实现的）存在用户登录时引入的邮件和密码。我知道存在jwt，但是我想让它更简单，因为这是我第一次构建这么大的项目。我得到了axios错误。我把它放在下面。
下面是react登录页面的代码

import React, {useEffect, useState} from 'react';
import TextField from '@mui/material/TextField';
import Container from '@mui/material/Container';
import { Paper } from '@mui/material';
import Button from '@mui/material/Button';
import axios from 'axios'

export default function BasicTextFieldslLogin() {
  
  const paperStyle={padding:'50px 20px', width:'600', margin:'20px auto'};
  const[email, setEmail] = useState('')
  const[password, setPassword] = useState('')
  const[posts, setPosts] = useState([])
  
  const handleClick = (e)=>{

    const person = {email, password}
    console.log(person)
  }

  useEffect(()=>{
        axios.get("http://localhost:8080/persons/login/{email}/{password}")
        .then(res=>{
            console.log(res)
            setPosts(res.data)
            console.log(posts)
        })
        .catch(err=>{
            console.log(err)
        })
  },[])

  return (
    <Container>
        <Paper elevation={3} style={paperStyle}>
            <h1 style={{color:"blue"}}>Login!</h1>
             <form className="formLogin" noValidate autoComplete="off">
                 <TextField sx = {{mb: 2}} required id="outlined-basic" label="Email" variant="outlined" fullWidth
                 value = {email}
                 onChange = {(e)=>setEmail(e.target.value)}
                 />
                 <TextField sx = {{mb: 2}} required id="outlined-basic" label="Password" type="password" variant="outlined" fullWidth
                 value = {password}
                 onChange = {(e)=>setPassword(e.target.value)}
                 />
                 <Button variant="contained" sx={{width:"200px", height:"50px", fontSize:"30px", fontWeight:"bold"}}
                 onClick={handleClick}
                 >Submit</Button>
             </form>
      </Paper>
    </Container>
  );
}

这是我得到的错误：
登录名：1从源"http：//localhost：3000"访问位于"http：//localhost：8080/persons/login/%7B电子邮件%7D/%7B密码%7D"的XMLHttpRequest已被CORS策略阻止：请求的资源上不存在"Access-Control-Allow-Origin"标头。
Axios错误{消息：'网络错误'，名称：'AxiosError'，代码："错误网络"，配置：{...}，请求：XMLHttpRequest，...}代码："错误网络"配置：{过渡：{...}，适配器：数组（2），转换请求：数组（1），转换响应：数组（1），超时：0，...}消息："网络错误"名称："AxiosError"请求：XMLHttp请求{已就绪状态更改：空，就绪状态：4、超时：0，具有凭据：假，上传：XMLHttpRequestUpload，...}堆栈："AxiosError：网络错误\n位于XMLHttpRequest. handleError（http：//localhost：3000/static/js/2.chunk.js：78416：14）"原型：错误
xhr.js：217获取http：//localhost：8080/persons/login/%7电子邮件%7D/%7B密码%7D网络：：错误失败404
{电子邮件："mail"，密码：'pass '}电子邮件：邮箱密码："通过"原型：对象构造函数：对象（）具有OwnProperty：hasOwnProperty（）是以下对象的原型：是PrototypeOf（）属性是可枚举的：将IsEnumerable（）属性设置为本地字符串：toLocaleString（）转换为字符串：到字符串（）的值：值Of（）定义取数器：C定义获取器（）定义设置器：C定义设置器（）查找获取器：C查找获取器（）查找设置器：C查找设置器（）原型：（...）获取原型：* * 原型**（）集合原型：* * 原型**（）

reactjs

来源：https://stackoverflow.com/questions/74941315/react-js-problem-with-fetching-axios-to-localhost-database

2条答案

按热度按时间

nafvub8i1#

原因是CORS原点错误：
在任何现代浏览器中，跨源资源共享（Cross-Origin Resource Sharing，CORS）都是一个相关的规范，它伴随着通过REST API使用数据的HTML5和JS客户机的出现。
您必须在Spring（后端代码）中启用全局跨源资源共享（CORS）。https://www.baeldung.com/spring-cors#global-cors-configuration
要快速修复，请将@CrossOrigin注解直接添加到Controller。例如：

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/account")
public class AccountController {

    @RequestMapping(method = RequestMethod.GET, path = "/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

赞(0）回复(0）举报 2022-12-29

wecizke32#

有一个CORS错误在那里更新你的后端，所以它将提供响应请求起源于本地主机：3000。
错误响应中的引用-"http：//localhost：3000"已被CORS策略阻止：请求的资源上不存在"Access-Control-Allow-Origin"标头。

赞(0）回复(0）举报 2022-12-29