Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
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)
Ce que je veux
Je veux obtenir une réponse de status 200 quand la requête est faite.
Ce que j'obtiens
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.
