eckig $ http Post Nein 'Access-Control-Allow-Origin' (mit Laravel)

Question

Ich benutze Xampp Web-Server und meine $ http get funktioniert, aber auch nach der Einstellung der richtigen Header die Post-Methoden funktionieren nicht in jedem Weg!

Mein Winkel Beitrag:

$http({ 
      method: 'POST', 
      url: url, 
      data: $.param($scope.hero), 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function(response) { 
      console.log(response); 
      location.reload(); 
     }).error(function(response) { 
      console.log(response); 
      alert('This is embarassing. An error has occured. Please check the log for details'); 
     }); 

meine Form HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
          <h4 class="modal-title" id="myModalLabel">{{form_title}}</h4> 
         </div> 
         <div class="modal-body"> 
          <form name="frmheroes" class="form-horizontal" novalidate=""> 

           <div class="form-group error"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Name</label> 
            <div class="col-sm-9"> 
             <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{name}}" 
             ng-model="hero.name" ng-required="true"> 
             <span class="help-inline" 
             ng-show="frmheroes.name.$invalid && frmheroes.name.$touched">Name field is required</span> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Description</label> 
            <div class="col-sm-9"> 
             <input type="description" class="form-control" id="description" name="description" 
             placeholder="Hero Description" value="{{description}}" 
             ng-model="hero.description" ng-required="true"> 
             <span class="help-inline" 
             ng-show="frmheroes.description.$invalid && frmheroes.description.$touched">Valid Description field is required</span> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label for="inputEmail3" class="col-sm-3 control-label">Avatar</label> 
            <div class="col-sm-9"> 
             <input type="text" class="form-control" id="avatar" name="avatar" placeholder="Avatar" value="{{avatar}}" 
             ng-model="hero.avatar" ng-required="true"> 
            <span class="help-inline" 
             ng-show="frmheroes.avatar.$invalid && frmheroes.avatar.$touched">Avatar field is required</span> 
            </div> 
           </div> 

          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmheroes.$invalid">Save changes</button> 
         </div> 
        </div> 
       </div> 
      </div> 

Die Fehler bei der Buchung:

angular.min.js:101 POST http://localhost/heroland/public/api/v1/heroes (anonymous function) @ angular.min.js:101n @ angular.min.js:97g @ angular.min.js:94(anonymous function) @ angular.min.js:128m.$eval @ angular.min.js:142m.$digest @ angular.min.js:140m.$apply @ angular.min.js:143(anonymous function) @ angular.min.js:268Pf @ angular.min.js:36Of.d @ angular.min.js:36 
127.0.0.1/:1 XMLHttpRequest cannot load http://localhost/heroland/public/api/v1/heroes. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access. The response had HTTP status code 500. 

Die Lösung, die ich in meinem Server-Seite habe versucht, Laravel:

New Middleware - CORS:

<?php 

namespace App\Http\Middleware; 

use Closure; 

class Cors { 
    public function handle($request, Closure $next) 
    { 
     return $next($request) 
      ->header('Access-Control-Allow-Origin', '*') 
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); 
    } 
} 

es zu meiner Kernel.php Datei:

protected $routeMiddleware = [ 
     'auth' => \App\Http\Middleware\Authenticate::class, 
     'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 
     'can' => \Illuminate\Foundation\Http\Middleware\Authorize::class, 
     'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 
     'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 
     'cors' => \App\Http\Middleware\Cors::class, // <<< add this line 
    ]; 

und verwendet es in meinem Laravel Routen ..

Route::get('/api/v1/heroes/{id?}', array('middleware' => 'cors', 'uses' => 'Heroes@index')); 
Route::post('/api/v1/heroes', array('middleware' => 'cors','uses' => 'Heroes@store')); 
Route::post('/api/v1/heroes/{id}', array('middleware' => 'cors', 'uses' => 'Heroes@update')); 
Route::delete('/api/v1/heroes/{id}', array('middleware' => 'cors', 'uses' => 'Heroes@destroy')); 

kann immer noch‘ t posten Sie mein Formular zu Laravel. Warum das? die get funktioniert super ..

Answer 1

LOL. Ich habe seit Wochen mit diesem Problem konfrontiert, jetzt merke ich, dass ich als Localhost auf meinen Localhost zugreifen musste und nicht wie früher 127.0.0.1.

Problem gelöst!

Answer 2

Mit dem Chrom-Add-on CORS aktivieren: Link

Answer 3

Betrachten Sie dieses Paket mit:

https://github.com/barryvdh/laravel-cors

GEFAHR: Verwenden Sie den Code nicht darüber hinausgehende POINT IN PRODUCTION:

Als letztes Mittel können Sie dies an den Anfang Ihrer Routen Datei hinzufügen:

header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Methods: GET, POST, DELETE");