在 AngularJS 中使用 POST 到 .net Web API 时出错

Posted 2023-03-04

【中文标题】在 AngularJS 中使用 POST 到 .net Web API 时出错

【英文标题】：Error when using POST in AgularJS to .net WebAPI

【发布时间】：2016-06-26 23:27:48

【问题描述】：

我的 AngularJS 和 .net WebAPI 目前存在问题。 我可以通过我的 WebAPI 成功获取内容或对象，但是我目前在发布数据时遇到了问题。

我在尝试发布内容时遇到的错误如下：

OPTIONS http://localhost:18130/api/Products XMLHttpRequest 无法加载

http://localhost:18130/api/Products。预检响应有 HTTP 状态码 405 无效

请记住，当我尝试使用 Fiddler 发布时，它工作得非常好，没有任何问题。

以下是我用来发布的 AngularJS 代码：

var data =  "Title": $scope.title, "Description": $scope.description ;

$http.post(
    'http://localhost:18130/api/Products',
     JSON.stringify(data), 
         headers: 
             'Content-Type': 'application/json; charset=UTF-8'
          
      ).success(function (data) 
          console.log(data);
      );

有人可以指导我正确的方向吗？ WebApi 和 AngularJS 应用程序都在不同的域中，这是 CORS 问题吗？发帖时如何解决。

提前谢谢你。

【问题讨论】：

尝试在 web.config 中禁用 WebDAV 模块

它可能安装在 IIS 上。我将发布来自共享主机的示例配置，我们有类似的问题。

绝对是CORS，在网上搜索以启用它的web api。这是一个不断发展的过程，所以你会看到不同的方法取决于文章的年龄，但是here is a good starting point

您不必致电JSON.stringify(data)。我相信 Angular 会为您解决这个问题。

抱歉，没有注意到关于不同域的部分。您可以尝试使用上面提供的此示例中的包或asp.net site 中的包（我想使用的方法是相同的）。

【参考方案1】：

根据您在创建 Web api 项目时使用的模板，它可能使用也可能不使用 OWIN。 假设是（如果不是，scniro 的另一个答案将是一个投注起点）：

当我从 js 应用程序发布到 web api 时，我遇到了类似的问题。我从 nuget 安装了 Microsoft.Owin.Cors，并在 Startup.cs 中添加了：

    public void Configuration(IAppBuilder app) 
        app.UseCors(new CorsOptions 
            PolicyProvider = new CorsPolicyProvider 
                PolicyResolver = context => 
                    CorsPolicy result = new CorsPolicy 
                        AllowAnyHeader = true,
                        AllowAnyMethod = true,
                        AllowAnyOrigin = true,
                        SupportsCredentials = true
                    ;                        
                    return Task.FromResult(result);
                
            
        );
    

这将允许一切。在生产中，您可以将其更改为仅允许来自您允许的来源的请求，如下所示：

    public void Configuration(IAppBuilder app) 
        app.UseCors(new CorsOptions 
            PolicyProvider = new CorsPolicyProvider 
                PolicyResolver = context => 
                    CorsPolicy result = new CorsPolicy 
                        AllowAnyHeader = true,
                        AllowAnyMethod = true,
                        AllowAnyOrigin = false,
                        SupportsCredentials = true
                    ;
                    result.Origins.Add(ConfigurationManager.AppSettings.Get("YourAllowedUrl"));
                    return Task.FromResult(result);
                
            
        );
    

希望这会有所帮助。

【讨论】：

我不应该为此使用 OWIN

好的，不用担心，我会把这个答案留在这里，以防有人遇到这个问题，并且在使用带有 OWIN 的 web api 时遇到类似的问题。

嘿 Magrangs 我已经尝试安装它，但我不再收到我收到的错误，但没有提交任何数据！那么当一个调试的每个字段都显示为空时，有什么线索吗？

好的，原来是我问题的答案！我基本上安装了这个包并添加了这个代码并且它工作了，而且还必须做一些额外的改变。现在一切都好。谢谢

@Jordan 数据上升存在问题，无法将 json 解析为类。我使用 json.net，可能值得安装它并将其用作您的默认序列化程序。唉，我需要在控制台中看到帖子数据，因为它可能会被字符串化。

【参考方案2】：

@Jordan 尝试禁用所有 hanler，然后在 web.config 中读取：

<modules>
  <remove name="FormsAuthenticationModule" />
  <remove name="WebDAVModule" />
</modules>
<handlers>
  <remove name="WebDAV" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

【讨论】：

我刚试过这个，没有任何进展！我什至没有太多自定义代码，不知道为什么它不起作用

您是否尝试过像@Lex 建议的那样发布 JSON 对象？就像这样：$http.post('http://localhost:18130/api/Products', data).then(successCallback, errorCallback)