AngularJS + ASP.NET Web API跨域问题

29 浏览
0 Comments

AngularJS + ASP.NET Web API跨域问题

在我移动应用开发学习过程中,我遇到了一个新的障碍:跨域请求共享或CORS。我使用AngularJS + jQuery Mobile(Cordova手机客户端)和ASP.NET Web API(后端)的组合。我的问题是,我无法完成一个POST请求(或任何其他类型的请求)到一个API控制器。我的AngularJS控制器使用$http.post()服务方法调用Web API控制器。然而,Chrome调试器显示该调用在OPTIONS请求中失败(可能是CORS预检请求)。我已经根据以下帖子实现了CORS动作选择器:在Web API项目中启用CORS。尽管我可以从Fiddler调用api方法,但AngularJS仍然在OPTIONS预检请求中失败。关于AngularJS和跨域调用,我应该注意什么?有没有可能解决我的困境的方法?谢谢。

0
0 Comments

AngularJS + ASP.NET Web API跨域问题是由于CORS(跨域资源共享)的支持不完整而引起的。解决这个问题的方法是使用Thinktecture Cors对象,在WebApi中使用这些对象可以实现完整的CORS支持,而无需编写任何代码。

即使已经正确实现了CORS,我在IIS 7上遇到了一个非常奇怪的问题,通过启用WebDav的所有动词来解决了这个问题(是的,WebDav - 不要问我为什么,我只是按照博客文章上的说明操作的)。

请按照以下步骤操作:

1. 打开IIS管理器,进入你的应用程序的Handler Mapping。

2. 双击WebDav处理程序。

3. 点击"Request Restriction"。

4. 在"Verbs"选项卡上,选择"All verbs"。

再次强调,不知道为什么WebApi使用WebDav,但这个方法解决了POST和DELETE无法正常工作的问题,尽管已经正确实现了CORS。

以下是整理后的

AngularJS + ASP.NET Web API跨域问题通常由于CORS的支持不完整而引起。为了解决这个问题,我们可以使用Thinktecture Cors对象,通过在WebApi中使用这些对象,我们可以实现完整的CORS支持,而无需编写任何代码。

即使我们已经正确实现了CORS,但在使用IIS 7时,仍然可能遇到一些奇怪的问题。幸运的是,通过启用WebDav的所有动词,我们可以解决这些问题。不过,为什么WebApi使用WebDav仍然是个谜。

要解决这个问题,我们需要按照以下步骤操作:

1. 首先,打开IIS管理器,并进入你的应用程序的Handler Mapping。

2. 找到WebDav处理程序,并双击打开它。

3. 在弹出的窗口中,点击"Request Restriction"。

4. 在"Verbs"选项卡上,选择"All verbs"。

通过按照以上步骤操作,我们可以解决POST和DELETE方法无法正常工作的问题,即使我们已经正确实现了CORS。

希望以上内容能够帮助解决AngularJS + ASP.NET Web API跨域问题。

0
0 Comments

AngularJS + ASP.NET Web API 跨域问题的原因是浏览器的同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。解决方法是在Web API的Web.config文件中添加必要的跨域配置。

在给定的示例中,解决方法是在Web.config文件的节点中添加了以下内容:


    
        
        
        
        
    

这些配置允许来自http://localhost的请求访问Web API,并允许使用的请求头。

另外,示例中的AngularJS代码使用了`application/x-www-form-urlencoded`作为请求的内容类型,以避免发送预检请求。这可以通过将数据序列化为URL编码的形式来实现,然后在请求的headers中设置Content-Type为`application/x-www-form-urlencoded`。

0
0 Comments

AngularJS与ASP.NET Web API之间出现跨域问题的原因是缺少CORS(跨域资源共享)配置。解决方法是通过安装Microsoft.AspNet.WebApi.Cors包并在WebApiConfig.cs文件中配置CORS。

首先,使用Nuget安装Microsoft.AspNet.WebApi.Cors包:

Install-Package Microsoft.AspNet.WebApi.Cors

然后,在WebApiConfig.cs文件中添加以下代码:

var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*");
config.EnableCors(cors);

如果要在所有地方启用CORS,可以使用*代替您的网站地址,但这样会破坏CORS的安全性,可能会导致安全漏洞,仅供测试使用。

WebApi.Cors程序集还允许您通过控制器或其他更细粒度的方式启用CORS。更多细节可以在Web API网站的这里找到。

需要注意的是,正确的代码是config.EnableCors(cors);,而不是config.EnableCors();

0