Bonjour,
Voila je rencontre un petit problème avec mon code.
J'ai une application laravel coté back-end (sur le port 8000) dans laquelle j'ai crée un middleware CORS qui me permet de faire des requêtes
cross origin depuis mon front-end (sur le port 8080)
Voici mon Middleware Cors
<?php
namespace App\Http\Middleware;
use Closure;
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', env("CORS_DOMAINS", 'http://localhost:8080'))
->header('Access-Control-Allow-Methods', 'OPTIONS,POST,GET ,PUT, PATCH, DELETE')
->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-type, Authorization', 'Accept-Language','Content-Disposition', 'Accept');
}
}
Jusqu'à ici tout fonctionnent bien si je fais des requêtes simples avec vue-resource. Mais quand je passe comme données une formData Le cors échoue.
J'ai créer une classe Javascript pour l'upload des fichiers
class Upload {
defaultOptions = {
extensions: null,
maxSize: null,
multiple: false,
inputName: 'file'
}
errors = []
constructor (files, Vue, options) {
this.files = files
this.vm = Vue
this.options = Object.assign(this.defaultOptions, options)
this.data = new FormData()
return this.upload()
}
upload () {
if (!this.files.length) return
for (let i = 0; i < this.files.length; i++) {
if (this.checkFile(this.files[i])) {
this.pushToData(this.files[i])
} else {
this.errors.forEach((error) => this.options.errorsCallback(error))
}
}
for (let key in this.options.params) {
if (this.options.params.hasOwnProperty(key)) { this.data.append(key, this.options.params[key]) }
}
return this.vm.$http.post(this.options.url, this.data)
}
checkFile (file) {
return this.checkSize(file) && this.checkExtensions(file)
}
checkSize (file) {
if (this.options.maxSize && file.size > this.options.maxSize) {
this.errors.push('The file `' + file.name + '` size must not exceed' + this.options.maxSize)
return false
}
return true
}
checkExtensions (file) {
if (this.options.extensions && !this.options.extensions.includes(file.type.split('/')[1])) {
this.errors.push('The file `' + file.name + '` must have one of theses extensions :' + this.options.extensions.join(','))
return false
}
return true
}
pushToData (file) {
this.data.append(this.options.inputName, file)
}
}
export default Upload
C'est cette ligne qui fait la requête XHR:
return this.vm.$http.post(this.options.url, this.data)
Je veux obtenir une réponse de status 200 quand la requête est faite.
J'obtiens un message qui me dit qu'il manque l'en-tête Access-Control-Allow-Origin or cet en-tête est bel et bien autorisé dans mon Cors. Je ne comprends l'erreur.
Salut, ton middleware n'est surement pas chargé.
Il faut que tu englobes tes routes avec le middleware
Route::group([ 'middleware' => 'cors' ], function () {
// Ici tes routes
});