使用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);
};

使用Cors在WebApi中实现跨域请求,请求方式为angular的 $http.jsonp的更多相关文章

  1. vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'

    这里使用的是axios发请求出现的. 访问的api接口是: 在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable 解决办法: 1.检查请求方 ...

  2. jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求

    这是今天遇到的一个实际问题,在这篇随笔中记录一下解决方法. ASP.NET Web API提供了CORS支持,但ASP.NET MVC默认不支持,需要自己动手实现.可以写一个用于实现CORS的Acti ...

  3. .net core webapi搭建(2)跨域

    Core WebAPI中的跨域处理 在使用WebAPI项目的时候基本上都会用到跨域处理 Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 如图所示 修改 Configure ...

  4. ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 (转载)

    什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...

  5. 第十四节:Asp.Net Core 中的跨域解决方案(Cors、jsonp改造、chrome配置)

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  6. ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS)

    ylbtech-ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS) 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. ...

  7. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  8. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  9. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

随机推荐

  1. GitHub 上 57 款最流行的开源深度学习项目

    转载:https://www.oschina.net/news/79500/57-most-popular-deep-learning-project-at-github GitHub 上 57 款最 ...

  2. 通过ajax访问Tomcat服务器web service接口时出现No 'Access-Control-Allow-Origin' header问题的解决办法

    问题描述 通过ajax访问Web服务器(Tomcat7.0.42)中的json web service接口的时候,报以下跨域问题: XMLHttpRequest cannot load http:// ...

  3. Win2003x64系统

    2K3SP2X64_4IN1.iso 光盘说明:    本光盘由自己制作,包含Win2003 SP2 x64的 4个版本:MSDN SP2 R2 VOL免激活版.惠普OEM版.戴尔OEM版.IBMOE ...

  4. 简单ssh框架整合

    Struts2+Spring4 +Hibernate4 首先看看建立项目的框架 第一步  建立web项目 第二步  导入相对应需要的jar包(放在项目WEB-INFO/lib下) 需要导入Spring ...

  5. CI框架使用PHPmailer发送邮件找回密码

    之前用PHP+Mysql+jQuery结合ThinkPHP做了一个用户验证邮箱找回密码功能<ThinkPHP之PHP+Mysql+jQuery发送邮箱找回密码>,现在分享一下用CI框架结合 ...

  6. Python Tips阅读摘要

    发现了一本关于Python精通知识点的好书<Python Tips>,关于Python的进阶的技巧.摘录一些比较有价值的内容作为分享. *args and **kwargs 在函数定义的时 ...

  7. WebApiClient的接口输入验证

    1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,本文将介绍WebApiClient的接口参数输入有效性验证的新特性. ...

  8. 【CF487E】Tourists(圆方树)

    [CF487E]Tourists(圆方树) 题面 UOJ 题解 首先我们不考虑修改,再来想想这道题目. 我们既然要求的是最小值,那么,在经过一个点双的时候,走的一定是具有较小权值的那一侧. 所以说,我 ...

  9. 2017-2018-2 20165215 实验四《Android开发基础》实验报告

    2017-2018-2 20165215 实验四<Android开发基础>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:张家佳 学号:20165215 指导教 ...

  10. springMVC将处理的后的数据通过post方法传给页面时,可能会出现乱码问题,下面提出解决post乱码问题的方法

    在web.xml中加入: <!-- 解决post乱码问题 --> <filter> <filter-name>CharacterEncodingFilter< ...