AngularJS 跨域发布

Posted 2023-03-04

【中文标题】AngularJS 跨域发布

【英文标题】：AngularJS Cross Domain Post

【发布时间】：2014-07-07 19:41:37

【问题描述】：

我正在尝试使用 AngularJS 和 Laravel 制作应用程序。但是，当我尝试通过 $http 以 Angular 提交表单时，出现错误：

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

【参考方案1】：

好的，我知道该怎么做。这是 apache 不接受我的标头的问题。所以我将这一行添加到 laravel 公用文件夹中的 .htaccess 中：

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

希望这对人们有所帮助。

【参考方案2】：

发送数据喜欢

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

如果您的 url 是“localhost”，那么难怪它不起作用.. 通过您的 PC（服务器）IP 联系，例如 192.168.0.1

【讨论】：

感谢您的回答，但这对我没有帮助。我现在得到 $ 未定义的错误。我想这将是来自 jquery 的东西，但如果可能的话，我想不这样做。

我在服务器端得到一个空的 $_POST 并切换到这个修复它。

@Jared 想知道在 *** 上 192.168.0.1 是否可以正常工作，或者有必要使用 *** 中可见的 ip。代理呢？