MVC 之 WebAPI 系列二
今天,我想在此记录下 WebApi 跨域调用
1. 什么叫跨域:
跨域问题简单理解就是JavaScript同源策略的限制,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服务器明确地告知它允许跨域调用。
所以,跨域的问题虽然是由于浏览器的请求产生,但是却需要在服务端来进行解决,道理很简单,不可能要求所有客户端降低安全性。
照下图,再深入了解下什么跨域:
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 允许
----------------------------------------------------------------------------------------------------
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
----------------------------------------------------------------------------------------------------
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名,不同端口 不允许
----------------------------------------------------------------------------------------------------
http://www.a.com/a.js
https://www.a.com/b.js 同一域名,不同协议 不允许
----------------------------------------------------------------------------------------------------
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
----------------------------------------------------------------------------------------------------
http://www.a.com/a.js
http://script.a.com/b.js 主域相同,子域不同 不允许
----------------------------------------------------------------------------------------------------
http://www.a.com/a.js
http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
----------------------------------------------------------------------------------------------------
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许
2. 在未做允许跨域情况下调用WebAPI
知道了什么是跨域后,我们在一开始调用Web Api 时,就知道为什么会调用不成功
下面我来演示下。我本地写了一个很简单的Webapi,并且发布到了IIS(不会发布Webapi的,请自行百度,不在本文所述范畴)
发布后,可以在浏览器中浏览到
然后,我写了一个Web程序来调用这个Webapi,代码如下:
在调用时,就会失败:
使用Chrome查看,错误如下:
意思很明显,就是跨域,被禁止访问加载
3. 解决跨域
Webapi有自己解决跨域的方法,那就是修改Web.config,来实现跨域的授权动作。
在Web.config内,写入下面代码(附图)
<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>
4. 添加跨域授权后再调用
写了Web.config授权文件后,调用即可成功