您好,登錄后才能下訂單哦!
.NET Core中怎么實現(xiàn) API CORS,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
GET/POST 請求
在服務(wù)端不做任何調(diào)整的情況下,前端發(fā)起 AJAX 請求,如:
$.ajax({ type: 'get', url: 'http://localhost:5000', success: function (result) { $('#result').html(result); } });
200 !?。『孟窈苷5臉幼?,看似沒毛病。但會發(fā)現(xiàn) Response 內(nèi)屁都沒有,然后回到瀏覽器 Console 查看會有一個錯誤信息,提示不支持跨域訪問,涼涼。
JSONP
在遇到跨域問題時很容易想到 JSONP 的解決方式,但也只限于 GET 請求,POST 據(jù)說比較艱難,我自己也沒試用,這里就不測試了。
$.ajax({ type: 'get', url: 'http://localhost:5000/home/jsonpTest', data: { name: 'beck' }, dataType: "jsonp", jsonpCallback: "jsonpCallback", success: function (result) { $('#result').html(result.Data); } });
那么現(xiàn)在問題來了,JSONP 和 GET 請求畢竟有自身的一些限制,如果非要 POST 怎么辦?那就選擇 CORS 吧 !
CORS
CORS (Cross-Origin Resource Sharing, 跨源資源共享) 是W3C出的一個標(biāo)準(zhǔn),其思想是使用自定義的 HTTP 頭部讓瀏覽器與服務(wù)器進行溝通,從而決定請求或響應(yīng)是應(yīng)該成功,還是應(yīng)該失敗。CORS 與 JSONP 都可以做到跨源資源共享,但與 JSONP 不同,CORS 可以支持除 GET 方式以外所有類型的 HTTP 請求。
在介紹實現(xiàn)方式之前先簡單了解部分 CORS 相關(guān)的理論,不然可能對遇到的問題會有點懵,特別其中的 OPTIONS 請求,明明設(shè)置的是 GET、POST 方式,怎么就多出一個 OPTIONS 請求?
CORS 請求分簡單請求和復(fù)雜請求:
簡單請求
同時滿足以下條件的歸類為簡單請求:
請求方式是 HEAD 、GET、POST中的一種;
HTTP的頭信息不超出 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type 字段;
Content-Type 只限于 application/x-www-form-urlencoded、multipart/form-data、text/plain 三個之一;
簡單請求只需要服務(wù)端設(shè)置 Access-Control-Allow-Origin 允許請求來源地址即可,我們可以在 .NET Core API 項目的 Startup.cs 中進行如下調(diào)整:
public void ConfigureServices(IServiceCollection services) { // 添加支持跨域請求 services.AddCors(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 設(shè)置允許的請求來源,我本地請求發(fā)起方所在地址是 http://localhost:53894 app.UseCors(options => options.WithOrigins("http://localhost:53894")); }
前端發(fā)起 GET 或 POST 請求:
$.ajax({ type: 'post', url: 'http://localhost:5000/home/fromFormTest', data: { name: 'beck' }, success: function (result) { $('#result').html(result.data); } });
復(fù)雜請求
不滿足簡單請求條件的統(tǒng)一歸類為復(fù)雜請求,復(fù)雜請求會在正式通信之前增加一次 OPTIONS 請求,稱為 “預(yù)檢” 請求,通過預(yù)檢請求中的返回頭信息,判斷當(dāng)前請求是否被允許。
我們可以設(shè)置 contentType 為 application/json,此請求就變成了復(fù)雜請求:
$.ajax({ type: 'post', url: 'http://localhost:5000/home/fromBodyTest', contentType: 'application/json', data: JSON.stringify({ name: 'beck' }), success: function (result) { $('#result').html(result.data); } });
如果 API 項目中的 Startup.cs 保持上面的調(diào)整后不變,會看到 OPTIONS 請求中Response Headers 信息并沒有出現(xiàn)允許請求的源地址 Access-Control-Allow-Origin ,這就代表預(yù)檢失敗了,繼續(xù)涼涼。
這是因為在預(yù)檢請求的返回頭中還必須要設(shè)置 Access-Control-Request-Method 和 Access-Control-Request-Headers。app.UseCors 是支持設(shè)置某些頭信息或者某些請求類型,這些在使用時看實際情況而定。
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 設(shè)置允許的請求來源地址、頭信息、請求類型 app.UseCors(options => options .WithOrigins("http://localhost:53894") .AllowAnyHeader() .AllowAnyMethod() ); }
預(yù)檢通過之后,會發(fā)起 POST 請求:
Cookie
如果請求需要攜帶 Cookie 到服務(wù)端,那還需要稍微做一些調(diào)整,如下:
Startup.cs 增加 AllowCredentials 配置:
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 設(shè)置允許的請求來源地址、頭信息、請求類型、Cookie app.UseCors(options => options .WithOrigins("http://localhost:53894") .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials() ); }
AJAX 請求中也需要增加 withCredentials 設(shè)置:
setCookie('name', 'test'); $.ajax({ type: 'post', url: 'http://localhost:5000/home/fromBodyTest', contentType: 'application/json', data: JSON.stringify({ name: 'beck' }), xhrFields: { withCredentials: true }, success: function (result) { $('#result').html(result.data); } });
看完上述內(nèi)容,你們掌握.NET Core中怎么實現(xiàn) API CORS的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。