jQuery跨域访问ASP.NET WebAPI

花了整整一天半搞WebAPI的内容,下面和大家分享一下如何从零开始搭建一个属于你自己的WebAPI框架。首先当然是利用VS2015创建一个空的ASP.NET项目,我这里命名为Web,然后在解决方案里再添加一个空的WebAPI项目,我这里命名为WebApi,工程结构如下图所示:
在这里插入图片描述
第一步:添加实体类
WebApi项目跟MVC很像,我们先在Models文件夹里添加一个User实体类:
在这里插入图片描述
代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApi.Models
{
    public class User
    {
        /// <summary>
        /// 编号
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 用户名
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 密码
        /// </summary>
        public string Password { get; set; }
    }
}

第二步:添加控制器
在Controllers文件夹下添加一个Web API 2控制器,命名为UserController即可,

代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApi.Models;

namespace WebApi.Controllers
{
    public class UserController : ApiController
    {
        [HttpGet]
        public List<User> GetUsers()
        {
            List<User> list = new List<User>();
            list.Add(new User() { Id = 1, UserName = "admin", Password = "123456" });
            list.Add(new User() { Id = 2, UserName = "root", Password = "123456" });
            return list;
        }
    }
}

第三步:引入跨域组件
查看Web项目的属性,其URL为http://localhost:7222/
在这里插入图片描述
而WebApi项目的URL为http://localhost:7363/
在这里插入图片描述
很明显,如果要在Web项目中利用jquery ajax向WebApi项目发起请求必然会涉及到跨域访问,而原则上IIS不允许不同站点间的脚本访问,因此需要解决跨域访问题。在Nuget中搜索Microsoft.AspNet.WebApi.Cors,将其引入WebApi项目中
在这里插入图片描述
打开WebApi项目的配置文件,在appSettings节点下加入如下配置:

<appSettings>
    <add key="cors:allowedMethods" value="*"/>
    <add key="cors:allowedOrigin" value="http://localhost:7222"/>
    <add key="cors:allowedHeaders" value="*"/>
</appSettings>

然后在WebApiConfig.cs文件中加入如下代码,注意要将"api/{controller}/{id}“修改为"api/{controller}/{action}/{id}”

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebApi
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            string methods = ConfigurationManager.AppSettings["cors:allowedMethods"].ToString();
            string origins = ConfigurationManager.AppSettings["cors:allowedOrigin"].ToString();
            string headers = ConfigurationManager.AppSettings["cors:allowedHeaders"].ToString();
            EnableCorsAttribute cors = new EnableCorsAttribute(origins, headers, methods)
            {
                SupportsCredentials = true
            };
            config.EnableCors(cors);

            // Web API 配置和服务

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

第四步:利用jQuery访问WebApi
在Web项目中引入jQuery相关文件,新建一个html文件,加入如下代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>jQuery跨域访问WebApi</title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'http://localhost:7363/api/User/GetUsers',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        document.write(data[i].UserName + ":" + data[i].Password + "<br />");
                    }
                },
                error: function (err) {
                    alert('错误');
                }
            })
        })
    </script>
</body>
</html>

重新生成一下解决方案,运行项目即可,运行结果如下所示:
在这里插入图片描述

版权声明:本文为HerryDong原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HerryDong/article/details/102620771