AngularJS REST API 问题答案

【问题标题】：AngularJS REST API problemsAngularJS REST API 问题
【发布时间】：2014-02-04 08:25:46
【问题描述】：

我正在尝试使用 POST 从 REST API 接收数据。我创建了应该发出 POST 请求的控制器。

function LoginCtrl($scope, $http, $rootScope) {
$scope.login = function () {
    var form = {};
    form.user = $scope.name;
    form.pwd = $scope.password;
    $http({
        method: 'POST',
        url: serverUrl+'/login',
        data: $.param(form),
        headers: {
            'Content-type': 'application/json'
        }
    })
    .success(function(data, status, headers, config) {
        //success
    })
    .error(function(data, status, headers, config) {
        //error
    });
}

当我运行此代码时，浏览器会创建 OPTIONS 请求并显示 Access-Control-Allow-Origin（见下文）。我的 API 仅适用于 POST 请求，并且需要将 Content-type 标头设置为 application/json。

但是当我将 Content-type 更改为 application/x-www-form-urlencoded 浏览器发出 POST 请求时，我仍然看到错误：

XMLHttpRequest cannot load http://nimoz.asi.pl:8080/api/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

如何将 Content-type 标头设置为 application/json，保留 POST 方法并避免 Access-Control-Allow-Origin 错误？

我使用 AngularJS 版本 1.2.10。

编辑：当我在 DEV HTTP CLIENT（Chrome 扩展）上测试 API 时，请求工作： http://scr.hu/277/hfwby

【问题讨论】：

标签： angularjs

【解决方案1】：

这不是 Angular 的问题，这是您的服务器的问题。您的浏览器不会向与您发出请求的页面位于不同域、端口或协议的服务器发送请求。

OPTIONS 请求及其传递的标头（如 Access-Control-Allow-Origin 标头）是 CORS 协议的一部分。你应该研究如何在你的服务器 API 中实现 CORS。大多数网络服务器都包含插件或等效的自动允许 CORS。

有关 CORS 的一些背景信息，请参见此处的 Wikipedia：http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

【讨论】：

补充一点，现代浏览器会在真正的 POST（或其他）之前先向跨域 url 发送一个 OPTIONS 请求。这称为飞行前请求。如果允许，您的服务器应发送 Access-Control-Allow* 标头。然后 JS 库将发送“真实”的 POST 请求。

【解决方案2】：

这是CORS 限制。如果 ypu 有权访问服务器，则将标题添加到所需页面：Access-Control-Allow-Origin: *

如果不使用JSONP。这里是Angular Docs

【讨论】：

那么，为什么当我在 Chrome 扩展程序中测试 API 时，一切正常？扩展也从 localhost 创建请求。