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();}

?

轉載于:https://www.cnblogs.com/VirtualMJ/p/5182877.html

總結

以上是生活随笔為你收集整理的跨域调用WebApi的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。