reactjs - Cors error in laravel-12 api that is called from react - Stack Overflow

Hi im trying to do a app using react as front-end and laravel 12 as api doing AJAX requestsi can crea

Hi im trying to do a app using react as front-end and laravel 12 as api doing AJAX requests i can create users from bruno but when i trying with my react app i always receive the following CORS error:

Access to fetch at 'http://localhost:5173/' (redirected from 'http://127.0.0.1:8000/api/users') from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

this is my cors.php file:

<?php

 return [

'paths' => ['api/*', 'sanctum/csrf-cookie'],


'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,

];

this is my react file:

import { useState } from "react";

//id, username, password, nombre, apellidos, tipo_usuario y activo
const register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [name, setName] = useState('');
const [lastname, setLastname] = useState('');

const checkValues = () => {
    let mensaje = '';

    if (!username) {
        mensaje += 'username*\n'
    }

    if (!password) {
        mensaje += 'password*\n'
    }

    if (!confirm) {
        mensaje += 'confirm password*\n'
    }

    if (!name) {
        mensaje += 'Nombre*\n'
    }

    if (!lastname) {
        mensaje += 'lastname*\n'
    }

    if (mensaje) {
        mensaje = 'Los siguientes campos son obligatorios:\n' + mensaje;
        alert(mensaje)
        return false;
    }

    if (!password === confirm) {
        alert('Las contraseñas no son iguales.');
        return false;
    }

    return true;
};

const send = async () => {
    if (checkValues()) {
        const url = 'http://127.0.0.1:8000/api/users';
        const options = {
            method: 'POST',
            headers: { 'content-type': 'application/json' },
            
            body: JSON.stringify({username,password,name,lastname})
        };

        try {
            const response = await fetch(url, options);
            const data = await response.json();
            console.log(data);
        } catch (error) {
            console.error(error);
        }
    }
}

return (
    <div>
        <table>
            <tr>
                <td>
                    <label>Username:</label>
                </td>
                <td>
                    <input value={username} type="text" onChange={(e) => setUsername(e.target.value)} />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Password:</label>
                </td>
                <td><input value={password} type="password" onChange={(e) => setPassword(e.target.value)} /></td>
            </tr>
            <tr>
                <td>
                    <label>Confirm Password:</label>
                </td>
                <td><input value={confirm} type="password" onChange={(e) => setConfirm(e.target.value)} /></td>
            </tr>
            <tr>
                <td>
                    <label>Nombre:</label>
                </td>
                <td><input value={name} type="text" onChange={(e) => setName(e.target.value)} /></td>
            </tr>
            <tr>
                <td>
                    <label>Apellidos:</label>
                </td>
                <td><input value={lastname} type="text" onChange={(e) => setLastname(e.target.value)} /></td>
            </tr>
            <tr>
                <td></td>
                <td><button onClick={async () => await send()}>Register</button></td>
            </tr>
        </table>
    </div>
)
 }

  export default register;

And my react app are running with npx vite in: http://localhost:5173/

i tried so many things and nothing has worked maybe is easier only change the laravel version.

whatever i hope that someone know what is happening and can help me.I can send more information if is necesary

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744298122a4567362.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信