Question

我正在使用xampp web服务器和我的$ http get工作，但即使设置了正确的标题后，post方法也无法正常工作！

我的角色帖子：

$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');
        });

我的表单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>

发布时的错误：

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.

我一直在服务器端尝试的解决方案，Laravel：

新的中间件 - 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');
    }
}

将其添加到我的Kernel.php文件中：

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
    ];

并在我的laravel路线中使用它..

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'));

仍然无法将我的表格发布到laravel。这是为什么？得到的效果很好..

Answer 1

使用chrome附加组件启用CORS： Link

Answer 2

考虑使用这个包：

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

危险：请勿在生产中超出此要求使用该代码：

作为最后的手段，您可以将其添加到路线文件的顶部：

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

Answer 3

LOL。我已经面对这个问题已经好几个星期了，现在我意识到我必须以localhost的身份访问我的localhost而不是像过去那样访问127.0.0.1。

问题解决了！

angular $ http post No'Access-Control-Allow-Origin'（with laravel）

3 个答案: