使用Cors在WebApi中实现跨域请求
第一步，在webapi项目中安装cors
在Web API配置文件中(Global.asax)进行全局配置：
public class WebApiApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
#region 跨域请求
var config = GlobalConfiguration.Configuration;
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
#endregion
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
}
}
第二部，代码编写
控制器头部代码
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MinderController : ApiController
{ }
返回数据源代码，请注意，这里一定不要返回为字符串。如果返回为字符串，那么JSONP的方法不会识别出来，将永远不会去调用Success方法，我使用的是
angular中$http请求JSONP的，结果返回的数据状态码为200，但是一直没有执行success方法。调试了一天没有结果，后来返回的内容直接输出就可以了。
代码1：
public HttpResponseMessage GetMindData(int? CompanyID, int? parent, string callback)
{ Object root = new Object(); return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(callback + "(" + JsonConvert.SerializeObject(root) + ")", System.Text.Encoding.UTF8, "text/plain")
};
}
代码2：改短代码是使用MVC的方式返回的JSONP数据：
public JavaScriptResult GetMindData(int? CompanyID, string callback)
{ Object root = new Object ();
root.root = company;
string js = callback + "(" + JsonConvert.SerializeObject(root) + ")"; return JavaScript(js);
}
前端的调用:
angular中$http请求JSONP
angular.module('kityminderDemo', ['kityminderEditor'])
.controller('MainController', function ($scope, $http, $sce) {
$scope.initEditor = function (editor, minder) {
window.editor = editor;
window.minder = minder;
/*
$http.get("e.html").then(function (data) { //查询Use里的所有数据
window.editor.minder.importData('json', JSON.stringify(data.data));
});
*/
var myUrl = "https://XXX?callback=JSON_CALLBACK";
$sce.trustAsResourceUrl(myUrl);
$http.jsonp(myUrl)
.success(function (response) {
var a = 0;
console.log(response);
window.editor.minder.importData('json', JSON.stringify(response));
}).error(function (e) {
console.log(e);
});
};
});
JS的JSONP请求方式：未经验证谨慎使用
$.ajax({
url: RESTurl,
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'myCallback'
});
window.myCallback = function (data) {
console.log(data);
};