Ne pouvez pas envoyer une requête post quand le "Content-Type" est réglé sur "application/json"

Je suis en train de travailler sur un Réagir application et je suis en utilisant fetch pour envoyer une demande. J'ai fait un formulaire d'inscription récemment et maintenant je suis l'intégration de l'API. Auparavant, l'API accepté url des données codées et il était tout fonctionne bien. mais maintenant que les besoins ont changé et l'API accepte les données en JSON, j'ai dû changer le contenu de l'en-tête de type de "application/x-www-form-urlencoded' "application/json". Mais j'obtiens l'erreur suivante:

Chercher de l'API ne peut pas charger http://local.moberries.com/api/v1/candidate.
Réponse à la demande de contrôle en amont ne passent pas de contrôle d'accès: Aucun
"Access-Control-Allow-Origin' en-tête est présent sur le demandé
de la ressource. Origine " http://localhost:3000 ' est donc pas permis
d'accès. Si opaque réponse répond à vos besoins, définition de la demande de
en mode "non-scro' pour aller chercher la ressource avec la SCRO désactivé.

J'ai même mis le "Access-Control-Allow-en-Têtes" dans l'API, mais il ne fonctionne toujours pas. Voici le code pour le côté client:

sendFormData() {
let {user} = this.props;
var formData = {
first_name: ReactDOM.findDOMNode(this.refs.firstName).value,
last_name: ReactDOM.findDOMNode(this.refs.lastName).value,
city: ReactDOM.findDOMNode(this.refs.currentCity).value,
country: ReactDOM.findDOMNode(this.refs.currentCountry).value,
is_willing_to_relocate: user.selectedOption,
cities: relocateTo,
professions: opportunity,
skills: skills,
languages: language,
min_gross_salary: minSal,
max_gross_salary: maxSal,
email: ReactDOM.findDOMNode(this.refs.email).value,
password: ReactDOM.findDOMNode(this.refs.password).value
};
var request = new Request('http://local.moberries.com/api/v1/candidate', {
method: 'POST',
mode: 'cors',
headers: new Headers({
'Accept': 'application/json',
'Content-Type': 'application/json'
})
});
var requestBody = JSON.stringify(formData);
console.log(requestBody);
fetch(request, {body: requestBody})
.then(
function (response) {
if (response.status == 200 || response.status == 201) {
return response.json();
} else {
console.log('Failure!', response.status);
}
}).then(function (json) {
var responseBody = json;
console.log(typeof responseBody, responseBody);
});
}

Et ici est le code de l'API:

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: Origin, Content-Type, application/json');
}
}

Je ne peux vraiment pas comprendre le problème. De l'aide sera appréciée.

OriginalL'auteur Arslan Tariq | 2016-08-17