博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
阅读量:6094 次
发布时间:2019-06-20

本文共 1467 字,大约阅读时间需要 4 分钟。

问题描述

当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况。

重现方式

  1. 使用模板创建一个最简单的ASP.NET Web API项目,调试起来确认能正常工作

  2. 创建另外一个项目,仅仅包含一个HTML页面,发起AJAX的调用

  3. 在浏览器中打开这个网页,我们会发现如下的错误(405:Method Not Allowed)

     

    【备注】同样的情况,也发生在ASP.NET MVC中。某些时候,MVC也可以直接用来开发服务,与WebAPI相比各有优缺点。下面是一个利用MVC开发的服务的例子

 

原因分析

跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用。

所以,跨域的问题虽然是由于浏览器的行为产生出来的,但解决的方法却是在服务端。因为不可能要求所有客户端降低安全性。

 

解决方案

针对ASP.NET MVC和ASP.NET Web API两种项目类型,我做了一些研究,确定下面的方案是可行的。

针对ASP.NET MVC,只需要在web.config中添加如下的内容即可

<system.webServer>

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

<add name="Access-Control-Allow-Headers" value="Content-Type" />

<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

</customHeaders>

</httpProtocol>

<handlers>

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

</system.webServer>

 

 

针对ASP.NET Web API,除了上面这样的设置,还需要添加一个特殊的设计,就是为每个APIController添加一个OPTIONS的方法,但无需返回任何东西。

public string Options()

{

return null; // HTTP 200 response with empty body

}

 

【备注】这个功能也可以进行一些研究,设计成Filter的形式可能就更好了。

分类: 
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/4846791.html
,如需转载请自行联系原作者
你可能感兴趣的文章
iOS中如何根据UIView获取所在的UIViewController
查看>>
聊聊spring cloud gateway的RouteLocator
查看>>
一起来谈谈 Spring AOP!
查看>>
(二)Spring Boot 起步入门(翻译自Spring Boot官方教程文档)1.5.9.RELEASE
查看>>
Android Annotation扫盲笔记
查看>>
React 整洁代码最佳实践
查看>>
聊聊架构设计做些什么来谈如何成为架构师
查看>>
Java并发编程73道面试题及答案
查看>>
iOS知识小集·设置userAgent的那件小事
查看>>
移动端架构的几点思考
查看>>
Tomcat与Spring中的事件机制详解
查看>>
Spark综合使用及用户行为案例区域内热门商品统计分析实战-Spark商业应用实战...
查看>>
初学者自学前端须知
查看>>
iOS-仿微信相册: 根据显示内容显示并切换当前内容所在年份
查看>>
Retrofit 源码剖析-深入
查看>>
【前端大概一分钟】日常工作总结
查看>>
iOS开发 苹果热更新方案简介
查看>>
Vue-Router源码分析之install方法
查看>>
图解 | Pycharm激活、配置以及快捷方式
查看>>
Android图片加载内存占用分析
查看>>