Web API中使用CORS解決跨域(暫存)
Web API中使用Cros解決跨域
如果兩個頁面的協議,端口和域名都相同,則兩個頁面具有相同的源,註:IE不考慮端口,同源策略不會阻止瀏覽器發送請求,但是它會阻止應用程序看到響應。如下圖所示
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)它允許瀏覽器向跨源服務器,發出請求。CORS需要瀏覽器和服務器同時支持,目前,主流的瀏覽器都支持CORS,因此實現CORS通信的關鍵是服務器。CORS是通過目標服務器返回的Header設置來控制是否可跨域。其中重要的一個參數即 Access-Control-Allow-Origin(訪問控制允許來源),通過這個參數指定可以接收的請求資源。在.net Web API中實現的方式有以下幾種:
1.使用HttpResponseMessage
我們在Action中可以直接給HttpResponseMessage添加一個Access-Control-Allow-Origin header
public HttpResponseMessage GetBook(int id) { BookDto book = db.Books.Include(b=>b.Author).Where(b=>b.BookId==id).Select(AsBookDto).SingleOrDefault(); if (book == null) { return Request.CreateErrorResponse(HttpStatusCode.NotFound, "未找到實例"); } var response = Request.CreateResponse(book); //有Access-Control-Allow-Origin響應頭,瀏覽器才會把響應給客戶端,*表示允許任何來源的請求 response.Headers.Add("Access-Control-Allow-Origin", "*"); return response; }
2.使用配置文件
在webconfig文件中配置以下節點,使用配置文件時要先移除後添加,確保起作用
<system.webServer> <httpProtocol> <!--跨域設置--> <customHeaders> <remove name="Access-Control-Allow-Origin" /> <remove name="Access-Control-Allow-Headers" /> <remove name="Access-Control-Allow-Methods" /> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="*" /> </customHeaders> </httpProtocol> </system.webServer>
3.使用過濾器
1.添加一個名為Cores的過濾器
/// <summary> /// 跨域 /// </summary> public class Cores:ActionFilterAttribute { public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) { base.OnActionExecuted(actionExecutedContext); actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*"); } }
2.在App_strat的WebApiConfig.cs註冊過濾器
添加一行代碼: config.Filters.Add(new Cores()); 我們也可以不適用全局過濾器,在Controller,Action上添加特性即可。
4.使用AspNet.WebApi.Cors組件
1.安裝,直接在Nuget命令行輸入:
Install-Package Microsoft.AspNet.WebApi.Cors
2.在WebApiConfig.cs註冊
config.EnableCors();
3.在Controller或者Action上添加特性,即可完成跨域
[EnableCors(origins: "http://localhost:52754", headers: "*", methods: "*")]//[EnableCors(origins: "http://www.example.com", headers: "*", methods: "get,post")] public class BooksController : ApiController(){}
5.CORS的工作過程
CORS規範引入了幾個支持跨源請求的新HTTP頭。如果瀏覽器支持CORS,它會自動為跨源請求設置這些標頭。
一個簡單類型跨域,請求時會添加一個Origin,值為請求的源
如果服務器允許請求的源可以訪問,就在響應時添加一個Access-Control-Allow-Origin,其值和請求中的Origin相同,否則返回一個正常的響應。瀏覽器在收到響應時根據是否有Access-Control-Allow-Origin判斷是否把響應中的資源交給請求的源。
如果是復雜類型的請求(如請求方式是PUT
或DELETE
或者Content-Type
字段的類型是application/json
)會在正式通信之前,增加一次HTTP查詢請求,稱為"預檢"請求(preflight)。瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及服務器允許使用哪些HTTP Method和Header字段。只有得到肯定答復,瀏覽器才會發出正式的XMLHttpRequest
請求,否則就報錯,整個過程都是瀏覽器自動執行的,這裏不再詳細介紹。
參考文獻:
1.https://blog.csdn.net/github_37999472/article/details/64918942
2.https://blog.csdn.net/ligang2585116/article/details/73072868
Web API中使用CORS解決跨域(暫存)