У меня есть приложение React, которое использует fetch для получения POST-данных в бэкэнд, написанный на Laravel (PHP).
export const createVenue = (venueData) => dispatch => {
console.log('action called');
fetch('http://localhost:8001/api/venues', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
venueData
})
})
.then(res=>res.json())
.then(venue=>
dispatch({
type: NEW_VENUE,
payload: venue
})
);
};
И я установил промежуточное ПО с маршрутами на сервере для приема запроса CORSкак показано ниже:
class Cors {
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin','*')
->header('Access-Control-Allow-Methods','GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type');
}
}
Вот маршруты:
Route::group(['prefix' => 'api/','middleware' => 'cors'], function() {
Route::get('venues',[
'as' => 'apiVenueGet',
'uses' => 'Api\Venue@index'
]);
Route::post('venues',[
'as' => 'apiVenuePost',
'uses' => 'Api\Venue@create'
]);
});
Но когда я использую для отправки данных, я получаю это в консоли браузера:
Failed to load http://localhost:8001/api/venues: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Теперь проблема может быть решена, если я использую следующий заголовок в моем вызове fetch:
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
или с application/x-www-form-urlencoded.
Кто-нибудь может объяснить, почему application/json не делаетздесь работать?