码迷,mamicode.com
首页 > Windows程序 > 详细

C#+.netFrameWork4.5.2+WebAPI+Jquery+Ajax跨域请求问题

时间:2020-06-19 21:17:12      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:点击   jquer   管理   width   输入   ESS   inpu   template   char   

 

webAPI给予.net frameWork4.5.2

技术图片

 

 

 选中webAPI项目=》nuget包管理器=》输入microsoft.aspnet.webapi.cors=》安装

技术图片

 

 

 在webAPI   controller控制器设置Cors  ,并新建TestModel

 [EnableCorsAttribute("*", "*", "*")]
    public class TestController : ApiController
    {
        public string Post(TestModel text)
        {
            return "Post";
        }
    }

在App_Start文件夹中的WebApiConfig.cs文件中注册Cors功能

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务
            // Web API 路由
            config.MapHttpAttributeRoutes();
            //config.EnableCors();
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

前端页面代码

function aaa() {

              var aa = $(‘#aaa‘).val();
              var bb = $(‘#bbb‘).val();

            var testinfo = { "aa": aa, "bb": bb }

//var your_object = JSON.parse(json_text);
            jQuery.support.cors = true;
            $.ajax({
                url: ‘http://localhost:00000/api/Test‘,
                type: ‘POST‘,
                async: true,
                dataType: "json",
                contentType: ‘application/json;charset=utf-8‘,
                //contentType: ‘application/x-www-form-urlencoded‘,                
                data: JSON.stringify(testinfo),
                //data: { a: ‘zhangsan‘ }, 
                success: function (data) {
                    console.log(data),
                    alert(‘请求成功‘)
                },
                error: function (xhr) {
                    console.log(),
                    alert(‘请求失败‘)
                }
            });
        }

前端页面html代码

<body>
    <input type="text" id="aaa" value="aaaa" />
    <input type="text" id="bbb" value="bbbb" />
    <input type="button" id="aaa" value="请求" onclick="aaa()" />
</body>

启动webAPI项目   和   前端项目 ,点击‘请求’

技术图片

 

在post请求中打断点查看request传入数据

技术图片

 

 

 浏览器F12调试,已成功接收数据

技术图片

 

C#+.netFrameWork4.5.2+WebAPI+Jquery+Ajax跨域请求问题

标签:点击   jquer   管理   width   输入   ESS   inpu   template   char   

原文地址:https://www.cnblogs.com/wangjp-1233/p/13166297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!