文档章节

WebApi中跨域解决办法

开源俱乐部
 开源俱乐部
发布于 2014/06/05 01:13
字数 538
阅读 320
收藏 2

在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案。由于时间有限,本文不会深入。

笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景。涉及若干跨域方案:

方案1:jsonp+回调

方案2:Microsoft.AspNet.WebApi.Cors提供的跨域属性

方案3:利用ACAO编写自定义Filter实现

一、关于方案一

方案1是同事提出来的,已经经过论证,并且自己研究过,是可行的。本质上是通过script标签动态加载js,还有callback机制。

但是,我个人觉得这个方案有些不足:

  1. 实现细节复杂,技术复杂性增大了不少,并且不好理解(服务器端、Web前端两头忙活)

  2. 只支持单向跨域

  3. 只支持Get,不支持Post等Http请求

  4. 扩展性不强

  5. 我在读参考文章时,感觉思路不清晰(至于是作者思路不清晰,还是写作思路不清晰,还是我个人理解能力不到位这个不好说。)

二、关于方案二

首先,我提出了方案2。当时在我看来,这个是比较合适的一个方案,接近完美。但是,它不可行。

原因在于:Microsoft.AspNet.WebApi.Cors的framework版本是4.5,而我们现有项目是4.0。我们的时间有限,几乎没有时间做深入研究。

三、关于方案三

我受方案2的启发,个人实现了方案3。方案3实现的最终效果接近方案2。支持:Global级别、Controller级别、Action级别。

代码如下:

using System.Web.Http.Filters;
namespace MvcApplication1.CustomFilter
{
    public class CrossSiteAttribute : ActionFilterAttribute
    {
        private const string Origin = "Origin";
        private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        private const string originHeaderdefault = "*";
        public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {
             actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
        }
    }
}

服务器端代码示例:

[CrossSite]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

服务器端只需要把过滤器的标签[CrossSite]写上,服务器端就支持跨域了。省去了Web前端的处理和服务器端回调的处理。

当然,它很容易进行扩展。

© 著作权归作者所有

共有 人打赏支持
开源俱乐部
粉丝 10
博文 39
码字总数 31422
作品 0
朝阳
架构师
私信 提问
asp.net—WebApi跨域

一、什么是跨域?   定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。   同源策略限制了以下行为:   1、Cookie、Local...

WiTeem
今天
0
0
ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改进升...

科技小毛
2017/10/12
0
0
web api 初体验 解决js调用跨域问题

跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8001/api/user http://172.128.20.100:8002/api/user 基本介绍 ......

吞吞吐吐的
2017/12/06
0
0
webapi跨域使用session

在之前的项目中,我们设置跨域都是直接在web.config中设置的。 这样是可以实现跨域访问的。因为我们这边一般情况下一个webapi会有多个网站、小程序、微信公众号等访问,所以这样设置是没有问...

zhaoshang
07/27
0
0
ajax请求基于restFul的WebApi(post、get、delete、put)

近日逛招聘软件,看到部分企业都要求会编写、请求restFul的webapi。正巧这段时间较为清闲,于是乎打开vs准备开撸。 1.何为restFul? restFul是符合rest架构风格的网络API接口。 rest是一种软...

生活不止编程
12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机系统要素 C5

本章值得一提的是组织计算机的结构。Hack 的指令和数据是分开存储的,因此它的 CPU 有两个 input: IN inM[16], // M value input (M = contents of RAM[A]) instruction[16],...

lionets
15分钟前
0
0
SpringSecurity404需要注意的地方

在使用@RequestMapping的时候路径的值如果写为("auth"),虽然用的时候前面加不加"/"没有区别,但是在配置了SpringSecurity的http.authorizeRequests().antMatchers()时就必须要注意了! 🌰1...

百萬馬力
18分钟前
0
0
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享

作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分...

阿里云官方博客
19分钟前
1
0
RxJava window操作符

原文:https://github.com/Froussios/Intro-To-RxJava/blob/master/Part%204%20-%20Concurrency/3.%20Sequences%20of%20coincidence.md Sequences of coincidence Rx试图避免管道(pipeline)外......

woshixin
26分钟前
1
0
05.Beetl标签函数以及定界符、占位符介绍---《Beetl视频课程》

本期视频实现了博客的详情页面; 内容简介:使用了标签函数layout完成详情功能 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK #标签函数 layo...

Gavin-King
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部