一、客户端用JSONP请求数据

如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的:

{"YourSignature": "嫁人要嫁程序员,钱多话少死得早"}

然而,JSONP请求期望得到这样的JSON:

jQuery123456({"YourSignature": "嫁人要嫁程序员,钱多话少死得早"})

所以我们需要对WebAPI做拓展,让它支持这样的callback。我找到了两种办法。

自己写个Attribute,来给返回的JSON包上callback

public class JsonCallbackAttribute : ActionFilterAttribute
{
private const string CallbackQueryParameter = "callback"; public override void OnActionExecuted(HttpActionExecutedContext context)
{
var callback = string.Empty; if (IsJsonp(out callback))
{
var jsonBuilder = new StringBuilder(callback);
jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);
context.Response.Content = new StringContent(jsonBuilder.ToString());
}
base.OnActionExecuted(context);
} private bool IsJsonp(out string callback)
{
callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];
return !string.IsNullOrEmpty(callback);
}
}

然后在要被调用的方法前加上这个Attribute:

        [JsonCallback]
[HttpGet]
public HttpResponseMessage a()
{
string strJson = "{\"info\" : \"true\"}";
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(strJson, Encoding.UTF8, "text/plain")
};
return result;
}

非常简洁明了,但是这种方法有个缺点,就是被加了[JsonCallback]的方法,只能适用于JSONP的请求。如果你希望API能被各种场合的客户端调用,还是在服务端提供支持吧。

2. 通过自定义JsonMediaTypeFormatter实现

参见 Artech大神的文章:http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-03.html

蒋大神的文章的JsonpMediaTypeFormatter类只适合将对象传过去进行json序列化,有点弊端

支持CORS最地道的方法当然是在服务端提供支持,按官网的办法,100%成功。http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

主要步骤是:

1. 到nuget上装一个包:http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors/

2. 在WebApiConfig.Register方法中加入代码:

config.EnableCors();

3. 在Controller上加上Attribute:

[EnableCors(origins: "http://myclient.azurewebsites.net", headers: "*", methods: "*")]

这个域名是可以配置的,具体还请参考上面给出的官网教程。

最后,还要告诉大家一个坑,在服务端完提供支持以后,不要高兴的太早,如果你用jQuery.ajax()的方式去请求,还是会爆的:

$.ajax({
url: 'yourCORSurl',
data: '',
dataType: 'json',
type: 'GET',
contentType: 'application/json; charset=utf-8',
...
})

经过无数次爆破,终于发现,只要把dataType和contentType两个参数去掉,就肯定不会爆了!!!

ASP.NET Web API 跨域访问(CORS)要注意的地方的更多相关文章

  1. ASP.NET Web API 跨域访问(CORS)

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  2. ASP.NET Web API 跨域访问

    自定义特性 要在WebApi中实现JSONP,一种方式是实现自定义特性  http://stackoverflow.com/questions/9421312/jsonp-with-asp-net-w ...

  3. Web Api跨域访问配置及调用示例

    1.Web Api跨域访问配置. 在Web.config中的system.webServer内添加以下代码: <httpProtocol> <customHeaders> &l ...

  4. Web API 跨域访问(CORS)

    1.在web.config里把“    <remove name="OPTIONSVerbHandler" />  ”删掉. 2. 到nuget上装一个包:    ht ...

  5. asp.net web api 跨域问题

    缘起 以前在asp.net mvc时代,很少出现跨域问题 自从使用了asp.net web api + angular (1/2)之后,开始有跨域问题了. 简单普及下跨域: 我的理解是只要是前台页面与 ...

  6. asp.net web api 跨域,带cookie

    官网上有一个介绍 http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api 但是只支 ...

  7. ASP.NET web api 跨域请求

    1.学习文章:AJAX 跨域请求 - JSONP获取JSON数据 1.asp.net代码 参考文章:http://www.sxt.cn/info-2790-u-756.html (1).增加CorsH ...

  8. ASP.Net开发WebAPI跨域访问(CORS)的精简流程

    1: Web.config里有一行: <remove name="OPTIONSVerbHandler" /> 这个要删除. 2: nuget安装Microsoft.A ...

  9. web api 跨域访问

    在工程中 Install-Package Microsoft.AspNet.WebApi.Cors 在 webapiconfig.cs中 config.EnableCors(); 在 控制器中, [E ...

随机推荐

  1. Gen代码解读

    源代码为: package com.test19; public class Test04 { void spin(){ int i; for(i=0;i<100;i++){ ; } i = 0 ...

  2. wordpress 固定链接 404错误

    一开始我是用本机服务器做测试,写文章,发现固定链接模式在非默认情况下,都是404错误页面,具体如下: 方法一,.htaccess要开放写权限,这样在自定义wp的永久链接时,wp会自动重写.htacce ...

  3. 关于文档头部定义和meta元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. react config test env with jest and create-react-app 1

    /.babelrc { "presets": ["@babel/preset-env","@babel/preset-react"], &q ...

  5. linux更改文件权限

    chown –Rh cheat:cheat /home/cheat/task/Cheat

  6. Pyltp使用

    1.先使用pip安装pyltp-0.2.1-cp36-cp36m-win_amd64.whl 2.再参考API文档进行具体的使用:http://pyltp.readthedocs.io/zh_CN/d ...

  7. Java并发编程笔记之LongAdder和LongAccumulator源码探究

    一.LongAdder原理 LongAdder类是JDK1.8新增的一个原子性操作类.AtomicLong通过CAS算法提供了非阻塞的原子性操作,相比受用阻塞算法的同步器来说性能已经很好了,但是JDK ...

  8. [转]Configure Network Drive Visible for SQL Server During Backup and Restore Using SSMS

    本文转自:https://mytechmantra.com/LearnSQLServer/Configure-Network-Drive-Visible-for-SQL-Server-During-B ...

  9. 使用<% =Type%>获取后台值时报错:控件包含代码块(即 <% ... %>),因此无法修改控件集合。

    <% =Type%>不能放在runat="server"的标签中,删掉runat="server"之后dev的控件回调第一次发生时会刷新页面,有ru ...

  10. Func的介绍——c#封装的代理

    经常看到  Func<int, bool>...这样的写法,看到这样的就没有心思看下去了.我们学技术还是需要静下心来. 对Func<int,bool>的Func转到定义看它的解 ...