WebAPI笔记：CORS跨域

测试代码链接

webapi:客户端请求，会有一个跨域问题。比如从9008向9099网站后台发起ajax请求—请求到了9099后台；
但是9008网站客户端请求的回调函数success没有执行无法获取数据；请求会报错 not allowed access 是由于浏览器的同源策略。
浏览器是一个应用程序，有很多限制，不能访问/使用电脑信息，只有临时文件夹(cookie)
网络请求：限制了js请求的结果使用，除非服务器允许(防钓鱼)，只有浏览器直接请求才会有跨域的问题

为什么一定要跨域？
多种域名同一个数据源不经过后台访问，前端直接访问后端api；就是了能分摊压力一个页面其实有N多个请求，希望分一点到别的服务器

解决跨域请求的方法：
Jsonp 跨域请求 js不能直接跨域但是浏览器自己可以通过标签去访问别的域名
用scripts标签请求数据—后台代码单独处理请求—返回业务数据–前端通过js获取标签内容–做个剪切

CORS 引用，指定下cors配置；或者在方法过滤器特性ActionFilterAttribute.actionexcuted中完成cors配置；就支持跨域
为了安全起见不建议全部允许跨域！！！

CORS实现操作方法：
服务端：
1.NuGet添加Microsoft.AspNet.WebApi.Cors
2.在WebApiConfig.cs Register方法中注册：config.EnableCors(new EnableCorsAttribute("", "", “"))；所有域名能跨域访问WebApi
3.设置为只允许某域名能跨域访问WebApi：config.EnableCors(new EnableCorsAttribute(“https://localhost:44315”, "”, “"));
4.设置多个域名能跨域访问WebApi，可用逗号隔开：config.EnableCors(new EnableCorsAttribute(“https://localhost:57777,https://localhost:57447”, "”, “*”));
5.通过配置文件设置跨域参数

配置文件添加
<appSettings>
    <add key = "cors:allowedOrigins" value = "https://localhost:44315" />
    <add key = "cors:allowedHeaders" value = "*" />
    <add key = "cors:allowedMethods" value = "*" />
<appSettings />
在WebApiConfig.cs Register方法中注册
string origins = ConfigurationManager.AppSettings["cors:allowedOrigins"];
string headers = ConfigurationManager.AppSettings["cors:allowedHeaders"];
string methods = ConfigurationManager.AppSettings["cors:allowedMethods"];
config.EnableCors(new EnableCorsAttribute(origins, headers, methods));

6.细粒度设置跨域
在WebApiConfig.cs Register方法中注册：config.EnableCors();
在指定api上添加特性[EnableCors(origins:“https://localhost:44315”, headers:"", methods:"")]

客户端：

WebAPI笔记：CORS跨域

猜你喜欢