Javascript xmlhttprequest无法加载no'；访问控制允许原点'；仅使用post方法（Angularjs）

嗨，我正在为我的项目使用angularjs和.NETWebAPI。当我通过get方法获取数据时，它工作正常。但当我保存数据（POST）时，它会给我错误

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

这会产生这样的错误

无法加载XMLHttpRequest . 回应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许使用源“” 通道响应的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方法中给出错误。

您可以尝试设置默认的“内容类型”，如下所示：

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

更新

Js代码应该是这样的

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

---

有关详细信息，请点击此链接。

您可以尝试设置默认的“内容类型”，如下所示：

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

更新

Js代码应该是这样的

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

---

请点击此链接了解更多信息。

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

无法加载XMLHttpRequest . 回应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许使用源“” 进入响应的HTTP状态代码为404

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

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

请注意[FromBody]属性，该属性将使您能够将模型绑定到Web API控制器

你也可以尝试改变

变量数据={'FeeGroupID'：“”+scope.FeeGroupID+“”，'FeeGroupName'： “”+scope.FeeGroupName+“”}

致：

变量数据={'FeeGroupID'：scope.FeeGroupID，'FeeGroupName'： scope.FeeGroupName}

编辑：故障排除 由于CORS异常是由Chrome引发的，所以请执行以下操作以消除它，并从Web API中公开真正的异常。 退出chrome（杀死所有实例）。按下Windows图标，然后按下字母R，同时按住Windows键。将下面的命令粘贴到生成的框上，然后按enter键

chrome.exe--用户数据dir=“C:/chrome开发会话” --禁用web安全

---

这将在禁用网络安全性的情况下打开Chrome（无CORS过滤器）。确保chrome打开时会显示警告消息。运行你的应用程序，让我知道你得到了什么异常。

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

无法加载XMLHttpRequest . 回应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许使用源“” 进入响应的HTTP状态代码为404

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

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

请注意[FromBody]属性，该属性将使您能够将模型绑定到Web API控制器

你也可以尝试改变

变量数据={'FeeGroupID'：“”+scope.FeeGroupID+“”，'FeeGroupName'： “”+scope.FeeGroupName+“”}

致：

变量数据={'FeeGroupID'：scope.FeeGroupID，'FeeGroupName'： scope.FeeGroupName}

编辑：故障排除 由于CORS异常是由Chrome引发的，所以请执行以下操作以消除它，并从Web API中公开真正的异常。 退出chrome（杀死所有实例）。按下Windows图标，然后按下字母R，同时按住Windows键。将下面的命令粘贴到生成的框上，然后按enter键

chrome.exe--用户数据dir=“C:/chrome开发会话” --禁用web安全

---

这将在禁用网络安全性的情况下打开Chrome（无CORS过滤器）。确保chrome打开时会显示警告消息。运行你的应用程序，让我知道你得到了什么作为例外。

当你在浏览器中查看响应标题时，你能看到正在发送的CORS标题吗？请参见错误中的单词

飞行前

？服务器端是否正确处理选项请求？错误如下：-XMLHttpRequest无法加载。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。响应的HTTP状态代码为404。是的，它有“飞行前”一词是的，我知道这是错误的-查看它如何提到飞行前-这就是为什么我问你的服务器代码是否处理

选项

类型的请求-它像GET、POST、PUT、DELETE等，只有它的选项-请显示您收到该请求的所有响应标题

是的，它有“飞行前”一词

-是的，它有，因为它在您的问题中有（您根本没有阅读您的问题吗？）当您在浏览器中查看响应标题时，您能看到正在发送的CORS标题吗？请参见错误中的单词

飞行前

？服务器端是否正确处理选项请求？错误如下：-XMLHttpRequest无法加载。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。响应的HTTP状态代码为404。是的，它有“飞行前”一词是的，我知道这是个错误-查看它如何提到飞行前