Question

我正在尝试使用AngularJS和Laravel创建一个应用程序。但是当我尝试通过$ http以角度提交表单时，我收到错误：

    XMLHttpRequest cannot load http://api.domain.com/api/route.
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    Origin 'http://localhost' is therefore not allowed access.

我搜索过很多东西并试了很多东西。我应该注意到对api的GET请求确实有效。因为它将是一个phonegap应用程序，我必须允许access-control-allow-origin标头中的所有域。这是我的代码：

    app.config(function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common["X-Requested-With"];
    });

    appControllers.controller("ownController", function($scope, $http){
        $scope.categories = [
            {id: 1, name: "jeMoeder"},
            {id: 2, name: "jeMoeder"},
            {id: 3, name: "jeMoeder"},
            {id: 4, name: "jeMoeder"},
            {id: 5, name: "jeMoeder"},
            {id: 6, name: "jeMoeder"},
            {id: 7, name: "jeMoeder"}
            ];

        $scope.add = function (hype) {
            $http({
                method: "POST",
                url: "http://api.domain.com/api/route",
                data: "author_email=" + hype.author_email + "&category=" + hype.category + "&short_desc=" + hype.short_desc + "&description=" + hype.description,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).success(function (data) {
                console.log(data);
            });
        };
    });

    <section class="own">
        <div class="form container">

            <form data-ng-submit="add(hype)">
                <div class="input-container">
                    <input type="text" name="email" placeholder="Email"         class="input" data-ng-model="hype.author">
                </div>

                <div class="input-container">
                    <span class="input-label left">Category:</span>
                    <select name="category" class="input right" data-ng-model="hype.category">
                        <option data-ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
                    </select>
                    <div class="clearfix"></div>            
                </div>

                <div class="input-container">
                    <textarea name="eyecatcher" placeholder="Describe your hype, short!" class="input" rows="2" data-ng-model="hype.short_desc"></textarea>
                    <div id="count-overlay">Characters left: {{255-hype.short_desc.length}}</div>
                </div>

                <div class="input-container">
                    <textarea name="description" placeholder="In depth description of your hype..!" class="input" rows="8" data-ng-model="hype.description">        </textarea>             
                </div>

                <div class="controls">
                    <a href="#/" class="btn left btn-own-hype">Cancel</a>
                    <input type="submit" value="Send hype!" class="btn right btn-party">
                    <div class="clearfix"></div>
                </div>
            </form>

        </div>

    </section>

在服务器上：

    App::before(function($request)
    {
        if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
            $statusCode = 204;
            $headers = [
                'Access-Control-Allow-Origin'      => '*',
                'Access-Control-Allow-Methods'     => 'GET, POST, PUT, DELETE, OPTIONS',
                'Access-Control-Allow-Headers'     => 'Content-Type'
            ];

            return Response::make(null, $statusCode, $headers);
        }
    });

    App::after(function($request, $response)
    {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type');
        return $response;
    });

Answer 1

好的，我发现了怎么做。这是apache不接受我的标题的东西。所以我将此行添加到laravel的公共文件夹中的.htaccess：

Header set Access-Control-Allow-Origin "http://myexternaldomain.com"

希望这可以帮助人们。

Answer 2

发送数据

$http({
                    method  : "POST",
                    url     : url,
                    data    : $.param({key: 'value', key2 : 'value'}),
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
                })

如果您的网址是“localhost”，那么难怪它无法正常工作..通过您的PC（服务器）IP联系，例如192.168.0.1

AngularJS Cross Domain Post

2 个答案: