Dasar CORS: Respons kepada permintaan prapenerbangan gagal semakan kawalan akses: Pengepala 'Access-Control-Allow-Origin' tiada daripada permintaan
Jadi saya cuba bermain dengan bahagian hadapan dan belakang sedikit. Apabila cuba menghantar data dari bahagian hadapan ke pelayan saya mendapat
Akses kepada XMLHttpRequest di 'http://test.localhost/login' dari asal 'http://localhost:3000' telah disekat oleh dasar CORS: Respons kepada permintaan pra-penerbangan gagal Semakan Kawalan Akses: Tiada 'Kawalan-Akses' - Pengepala Allow-Origin' terdapat pada sumber yang diminta
Berikut ialah tetapan axios saya onClick:
export const login = (email, password) => {
return axiosClient.post('/login', { email, password })
.then(response => {
// handle successful login
return response.data;
})
.catch(error => {
// handle failed login
throw error;
});
};
AxiosClient saya ialah:
import axios from "axios";
const axiosClient = axios.create({
baseURL: process.env.REACT_APP_API_URL, (my localhost)
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
});
export default axiosClient;
Konfigurasi cors saya di bahagian belakang ialah
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
* @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
*/
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => 'http://localhost:3000',
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'Content-Type, Authorization',
];
if ($request->isMethod('OPTIONS')) {
return response()->json([], 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value) {
$response->header($key, $value);
}
return $response;
}
}