I'm trying to do a simple Sign Up form (just studying) and i'm having a problem with CORS. I've tried everything that I have found but none worked. From what I learned, Laravel 7 already works to prevent CORS issues but mine does not. Here are my codes:
api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group([
'prefix' => 'auth',
], function () {
Route::post('login', 'AuthController@login');
Route::post('signup', 'AuthController@signup');
Route::group([
'middleware' => 'auth:api'
], function () {
Route::get('logout', 'AuthController@logout');
Route::get('user', 'AuthController@user');
});
});
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
cors.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
Kernel.php
<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel {
/**
* The application's global HTTP middleware stack.
*
* These middleware are run during every request to your application.
*
* @var array
*/
protected $middleware = [
// \App\Http\Middleware\TrustHosts::class,
\App\Http\Middleware\TrustProxies::class,
\Fruitcake\Cors\HandleCors::class,
\App\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
/**
* The application's route middleware groups.
*
* @var array
*/
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\Fruitcake\Cors\HandleCors::class,
],
'api' => [
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\Fruitcake\Cors\HandleCors::class,
],
];
/**
* The application's route middleware.
*
* These middleware may be assigned to groups or used individually.
*
* @var array
*/
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
];
}
App.js
import React from 'react';
import axios from 'axios';
class App extends React.Component {
constructor() {
super();
this.state = {
name: "",
email: "",
password: "",
password_confimation: ""
};
}
/**
* Generic handleChange
* @param {The element changing} e
*/
handleChange = (e) => {
this.setState({
[e.target.name] : e.target.value
});
}
handleSubmit = () => {
const user = {
name: this.state.name,
email: this.state.email,
password: this.state.password,
password_confimation: this.state.password_confimation
};
axios.post("localhost:8000/api/auth/signup", user)
.then(response => {
console.log(response);
console.log(response.data);
});
}
render() {
return (
<div>
<label>Name:
<input type="text" name="name" onChange={this.handleChange.bind(this)} />
</label>
<br />
<label>E-mail:
<input type="text" name="email" onChange={this.handleChange.bind(this)} />
</label>
<br />
<label>Password:
<input type="password" name="password" onChange={this.handleChange.bind(this)} />
</label>
<br />
<label>Password Confirmation:
<input type="password" name="password_confimation" onChange={this.handleChange.bind(this)} />
</label>
<br />
<button onClick={this.handleSubmit}>Sign Up</button>
</div>
);
}
}
export default App;
Using Postman the Laravel works, it only occurs if I use React. What am I doing wrong?
