CORS策略：預檢請求的回應未通過存取控制檢查：請求中缺少'Access-Control-Allow-Origin'頭部
所以我嘗試稍微玩一下前端和後端。當嘗試從前端將資料發送到伺服器時，我得到了
從來源「http://localhost:3000」存取「http://test.localhost/login」處的XMLHttpRequest 已被CORS 政策阻止：對預檢請求的回應未透過存取控制檢查：否「 Access -Control-Allow-Origin'標頭存在於請求的資源上。
以下是我的 axios 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 是：
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;
我在後端的cors配置是
<?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;
}
}