Question

您好我正在为我的项目使用angularjs和.net web api。当我通过GET方法获取数据时，它可以正常工作。但是当我保存数据（POST）时，它会给我错误。

1.编码获取数据（工作正常）

A) angular service

return $http.get(API_URL + '/Accounting/GetFeeGroup');

B) Web API

[HttpGet]
    public List<FeeGroup> GetFeeGroup()
    {
        return _feeGroupRepository.GetFeeGroup();
    }

2.Code保存数据（给出错误）

A) angular service
var data = { 'FeeGroupID': "" + scope.FeeGroupID + "", 'FeeGroupName': "" + scope.FeeGroupName + "" }
    $http({
        url: API_URL + '/Accounting/SaveFeeGroup',
        method: "post",
        data: data,
        headers: { 'Content-Type': 'application/json' },
    })
    .success(function (data) {
        showSuccessMessage("Data Save Successfully");
        scope.GetFeeGroup();
    })

 B) Web API
[HttpPost]
    public long SaveFeeGroup(FeeGroup feeGroup)
    {
        return _feeGroupRepository.Save(feeGroup);
    }

这会给出这样的错误

XMLHttpRequest无法加载 http://localhost:8081/api/Accounting/SaveFeeGroup。回应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:8082” 访问。响应的HTTP状态代码为404.

我已经做过CORS起源事了

var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

请帮助我，这对我来说太复杂了，为什么它只用POST方法给出错误。

Answer 1

您可以尝试设置默认＆＃34;内容类型＆＃34;如下：

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

<强>更新

Js Code应该是这样的。

var feeGroup = {'FeeGroupID' :scope.FeeGroupID,'FeeGroupName':scope.FeeGroupName};

$http({
    url: API_URL + '/Accounting/SaveFeeGroup',
    method: "post",
    data: JSON.stringify(feeGroup),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

确保您的类属性如下。

public class FeeGroup 
{
    public long FeeGroupID { get; set; }
    public string FeeGroupName { get; set; }
}

请点击此链接获取更多信息angularjs ajax call。

Answer 2

有时CORS异常消息会产生误导。这里的关键例外是下面消息末尾的HTTP状态代码404：

XMLHttpRequest无法加载 http://localhost:8081/api/Accounting/SaveFeeGroup。回应预检请求未通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:8082＆＃39;因此是不允许的访问。 响应的HTTP状态代码为404 。

因此，您可以确保 Web API路径与Angular App中的路径匹配。我假设您在其他地方设置路线，但如果您使用的是Web API 2，则可以执行以下操作：

[HttpPost]
[Route("Accounting/SaveFeeGroup")]
public long SaveFeeGroup([FromBody]FeeGroup feeGroup)
{
    return _feeGroupRepository.Save(feeGroup);
}

请注意 [FromBody] 属性，该属性可让您将模型绑定到Web API控制器。

你也可以尝试改变，

var data = {＆＃39; FeeGroupID＆＃39;：＆＃34;＆＃34; + scope.FeeGroupID +＆＃34;＆＃34;，＆＃39; FeeGroupName＆＃39;：＆＃34;＆＃34; + scope.FeeGroupName +＆＃34;＆＃34; }

为：

var data = {＆＃39; FeeGroupID＆＃39 ;: scope.FeeGroupID，＆＃39; FeeGroupName＆＃39;： scope.FeeGroupName};

编辑：疑难解答 由于Chrome引发了CORS异常，请执行以下操作以清除它并从Web API中暴露真正的异常。退出chrome（杀死所有实例）。按住Windows图标，然后按下字母R，同时保持Windows按键。将下面的命令粘贴到结果框上，然后按Enter键。

chrome.exe --user-data-dir =＆＃34; C：/ Chrome开发者会话＆＃34; - 禁用网络的安全性

这将打开Chrome，并禁用 websecurity （无CORS过滤器）。确保Chrome打开时有一条警告消息。运行你的应用程序，让我知道你得到的例外情况。

xmlhttprequest无法仅使用post方法加载“access-control-allow-origin”（Angularjs）

2 个答案: