Kann keine Post-Anfrage senden, wenn der 'Content-Type' auf 'application / json' gesetzt ist
Ich arbeite an einer React-Anwendung und benutze fetch, um eine Anfrage zu senden. Ich habe vor kurzem ein Anmeldeformular erstellt und baue es jetzt in die API ein. Zuvor akzeptierte die API url-codierte Daten und alles funktionierte einwandfrei. Da sich die Anforderung geändert hat und die API Daten in JSON akzeptiert, musste ich den Inhaltstyp-Header von "application / x-www-form-urlencoded" in "application / json" ändern. Aber ich bekomme folgenden Fehler:
Fetch API kann nicht geladen werdenhttp: //local.moberries.com/api/v1/candidat. Die Antwort auf die Preflight-Anforderung besteht die Zugriffskontrollprüfung nicht: In der angeforderten Ressource ist kein Header 'Zugriffskontrolle-Zulassen-Ursprung' vorhanden. Ursprung 'http: // localhost: 3000 'ist daher nicht zugänglich. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den Anforderungsmodus auf "no-cors", um die Ressource mit deaktiviertem CORS abzurufen.
Ich habe sogar die 'Access-Control-Allow-Headers' in der API gesetzt, aber es funktioniert immer noch nicht. Hier ist der relevante Code für die Client-Seite:
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);
});
}
Und hier ist der relevante API-Code:
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');
}
}
Ich kann das Problem wirklich nicht herausfinden. Jede Art von Hilfe wird geschätzt.