I'm trying to build a simple crud application to manage events with Laravel 5.5 and React.js When I try to add a new event I get this error:" Access to XMLHttpRequest at 'http://localhost:8000/api/events' from origin 'http://127.0.0.1:8000' 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. " Also, when I reload the page where the events created should be shown it shows the same error. Here is the home page code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event Manager</title>
<link href="" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
</div>
@endif
You are logged in!
<div id="crud-app"></div>
<script src="" ></script>
<div id="example"></div>
<script src="" ></script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And here is the app.js code :
require('./components/Example');
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Master from './components/Master';
import CreateEvent from './components/CreateEvent';
import DisplayEvent from './components/DisplayEvent';
import UpdateEvent from './components/UpdateEvent';
render(
<Router history={browserHistory}>
<Route path="/" component={Master} >
<Route path="/add-item" component={CreateEvent} />
<Route path="/display-item" component={DisplayEvent} />
<Route path="/edit/:id" component={UpdateEvent} />
</Route>
</Router>,
document.getElementById('crud-app'));
Here is the CreateEvent Component:
import React, {Component} from 'react';
import {browserHistory} from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';
class CreateEvent extends Component {
constructor(props){
super(props);
this.state = {eventTitle: '', eventDescription: ''};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange1(e){
this.setState({
eventName: e.target.value
})
}
handleChange2(e){
this.setState({
eventDescription: e.target.value
})
}
handleSubmit(e){
e.preventDefault();
const events = {
title: this.state.eventName,
body: this.state.eventDescription
}
let uri = MyGlobleSetting.url + '/api/events';
axios.post(uri, events).then((response) => {
browserHistory.push('/display-item');
});
}
render() {
return (
<div>
<h1>Create Event</h1>
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Event name:</label>
<input type="text" className="form-control" onChange={this.handleChange1} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Event description:</label>
<textarea className="form-control col-md-6" onChange={this.handleChange2}></textarea>
</div>
</div>
</div><br />
<div className="form-group">
<button className="btn btn-primary">Add Event</button>
</div>
</form>
</div>
)
}
}
export default CreateEvent;
Here is the DisplayEvent Component:
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';
class DisplayEvent extends Component {
constructor(props) {
super(props);
this.state = {value: '', events: ''};
}
componentDidMount(){
axios.get(MyGlobleSetting.url + '/api/events')
.then(response => {
this.setState({ events: response.data });
})
.catch(function (error) {
console.log(error);
})
}
tabRow(){
if(this.state.events instanceof Array){
return this.state.events.map(function(object, i){
return ;
})
}
}
render(){
return (
<div>
<h1>events</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Event</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Event Title</td>
<td>Event Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
export default DisplayEvent;
And Lastly here is the Master.js Component
import React, {Component} from 'react';
import { Router, Route, Link } from 'react-router';
class Master extends Component {
render(){
return (
<div className="container">
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="https://itsolutionstuff.com">ItSolutionStuff.com</a>
</div>
<ul className="nav navbar-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="add-item">Create Event</Link></li>
<li><Link to="display-item">Event</Link></li>
</ul>
</div>
</nav>
<div>
{this.props.children}
</div>
</div>
)
}
}
export default Master;
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire