跨域调用WebApi

1. WebApi 和WebConfig 设置

using Libaray.DAL.Services;
using Libaray.Models.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace Libaray.WebApi.Controllers
{
    /// <summary>
    /// 图书信息
    /// </summary>
    public class BookController : ApiController
    {
        BookService BookDAL = new BookService();

        /// <summary>
        /// 查询所有图书信息
        /// </summary>
        /// <returns></returns>
        public IQueryable<BookModel> Get()
        {
            return BookDAL.FindList<BookModel>().AsQueryable();
        }

        /// <summary>
        /// 查询制定Id的图书信息
        /// </summary>
        /// <param name="id">图书Id</param>
        /// <returns>查询到的图书信息</returns>
        public BookModel Get(string id)
        {
            Guid BookId = Guid.Parse(id);
            return BookDAL.Find(u => u.BookId == BookId);
           
        }
    }
}

 

 <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <remove name="ApplicationInsightsWebTracking" />
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
    </modules>
    <httpProtocol>  <!-- 重点开始 -->
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Max-Age" value="30"/>
      <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS"/>
      <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
    </customHeaders>
  </httpProtocol>  <!-- 重点结束 -->
  </system.webServer>

 

 

2. MVC 客户端

@{
    ViewBag.Title = "FindBook";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>FindBook</h2>

<div class="row" style="margin-top:20px;">
    <div class="col-sm-2">
        @Html.Partial("_AccountNavigator")
    </div>
    <div class="col-sm-10">
        <form id="form" action="/Book/FindBook" method="get">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-1 control-label">图书Id</label>
                    <div class="col-sm-2">
                        @Html.TextBox("BookId", "", new { @class= "form-control input-sm" })
                        <input type="text" id="test" name="test" />
                    </div>
                    <input type="submit" value="查找" class="btn btn-sm btn-default" />
                </div>
            </div>
        </form>
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <td>BookId</td>
                        <td>Book Name</td>
                        <td>Author</td>
                    </tr>
                </thead>
                <tbody id="tb"></tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.getJSON("http://localhost:50159/api/book", function (data) {
            $.each(data, function (key, item) {
                $("#tb").append("<tr><td>" + item.BookId + "</td><td>" + item.BookName + "</td>" + "<td>" + item.Author + "</td></tr>");
            });
        });
    })
</script>

 

Controller 

  [HttpGet]
        public async Task<ActionResult> FindBook(string BookId)
        {
            if(!string.IsNullOrEmpty(BookId))
            {
                string url = "http://localhost:50159/api/book/";
                var handler = new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.GZip };
                using (var http = new HttpClient(handler))
                {
                    var data = await http.GetAsync(url);

                    var content = data.Content.ReadAsStringAsync();

                    return View(data);
                }
            }
            return View();
        }