在.NET?WebService中跨域CORS問題的解決方案
引言
在現(xiàn)代的Web應(yīng)用程序開發(fā)中，跨域資源共享（Cross-Origin Resource Sharing, CORS）問題是開發(fā)者經(jīng)常遇到的一個(gè)挑戰(zhàn)。特別是當(dāng)前端和后端服務(wù)部署在不同的域名或端口時(shí)，CORS問題就會(huì)顯得尤為突出。在這篇博客中，我們將深入探討如何在 .NET WebService 中解決CORS問題，幫助開發(fā)者順利實(shí)現(xiàn)跨域請(qǐng)求。
一、CORS問題描述
在Web應(yīng)用中，瀏覽器安全機(jī)制通常會(huì)阻止來(lái)自不同域的請(qǐng)求，這被稱為“同源策略”。同源策略允許同一來(lái)源（協(xié)議、主機(jī)和端口相同）的資源相互訪問，但會(huì)阻止不同來(lái)源的資源訪問。這種機(jī)制雖然提高了安全性，但在實(shí)際開發(fā)中，前端和后端通常會(huì)部署在不同的服務(wù)器上，這就引發(fā)了CORS問題。
舉個(gè)例子，當(dāng)你試圖從 http://frontend.com 發(fā)送一個(gè)請(qǐng)求到 http://api.backend.com 時(shí)，瀏覽器會(huì)攔截這個(gè)請(qǐng)求并拋出一個(gè)CORS錯(cuò)誤：
Access to XMLHttpRequest at 'http://api.backend.com/resource' from origin 'http://frontend.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
對(duì)于 .NET WebService ，如果前端應(yīng)用嘗試從另一個(gè)域名訪問服務(wù)，而服務(wù)端沒有適當(dāng)?shù)腃ORS策略，那么瀏覽器會(huì)阻止這些請(qǐng)求并顯示該跨域錯(cuò)誤。
二、CORS問題代碼示例
為了更好地理解CORS問題及其解決方案，讓我們先創(chuàng)建一個(gè)簡(jiǎn)單的前后端交互的.NET WebService示例。
1. 后端WebService接口代碼
首先，創(chuàng)建一個(gè)新的 .NET Framework 項(xiàng)目。你可以使用 Visual Studio 或者命令行工具（如 dotnet CLI ）來(lái)創(chuàng)建項(xiàng)目。在項(xiàng)目中，我們定義一個(gè) .asmx 文件，并在 .asmx.cs 文件里創(chuàng)建一個(gè)接口。
接口代碼如下：
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.Services;
namespace TestProject
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class Test : WebService
{
[WebMethod]
public void GetJsonData()
{
string json = "{\"MapPoints\":[{\"Coordinates\":[\"118.87220827635\",\"34.885061248714\"],\"Speed\":\"45.7\",\"Time\":\"2024-05-13T13:02:09\"}]}";
HttpContext.Current.Response.ContentType = "application/json";
HttpContext.Current.Response.Write(json);
}
}
}
這個(gè)控制器有一個(gè)GET方法，當(dāng)請(qǐng)求 http://localhost:80/Test.asmx/GetJsonData 時(shí)，它會(huì)返回一個(gè)串JSON數(shù)據(jù)。
這里我們可以用 Postman 測(cè)試代碼，正確返回結(jié)果，則驗(yàn)證后端接口代碼沒有問題。
2. 前端接口請(qǐng)求代碼
這里我使用的前端訪問接口的JavaScript代碼是基于 axios 實(shí)現(xiàn)的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS Test</title>
</head>
<body>
<h1>CORS Test</h1>
<button id="fetchDataButton">Fetch Data</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('fetchDataButton').addEventListener('click', function () {
getCarLocation();
});
function getCarLocation() {
axios.get('http://localhost:80/Test.asmx/GetJsonData')
.then(function (response) {
console.log('Success:', response.data);
})
.catch(function (error) {
console.error('Error:', error);
});
}
</script>
</body>
</html>
頁(yè)面效果圖如下：
當(dāng)點(diǎn)擊 Fetch Data 按鈕時(shí)，頁(yè)面會(huì)訪問 http://localhost:80/Test.asmx/GetJsonData 接口，并輸出返回值到F12控制臺(tái)日志里。
此時(shí)，如果我們不配置CORS，那么請(qǐng)求會(huì)被攔截，并報(bào)錯(cuò)：
Access to XMLHttpRequest at 'http://localhost:80/Test.asmx/GetJsonData' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
三、CORS配置詳細(xì)步驟
為了讓我們的 WebService 支持跨域請(qǐng)求，我們需要在項(xiàng)目中配置CORS。在 .NET Framework 中，我們可以通過如下步驟來(lái)配置CORS。
1. 配置Global.asax全局請(qǐng)求頭參數(shù)
創(chuàng)建或打開項(xiàng)目的 Global.asax 文件，找到或添加 Application_BeginRequest() 方法，添加響應(yīng)頭參數(shù)，其中 <"Access-Control-Allow-Origin", "*"> 這個(gè)響應(yīng)頭是最重要的。
namespace TestProject
{
public class Global : System.Web.HttpApplication
{
protected void Application_BeginRequest()
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization, X-Requested-With");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "86400");
HttpContext.Current.Response.StatusCode = 204;
HttpContext.Current.Response.End();
}
}
}
}
要非常注意的是，每個(gè)請(qǐng)求頭參數(shù)只能添加一次，如果重復(fù)添加，依然會(huì)訪問報(bào)錯(cuò)，可以排查一下 web.config 文件或者專門的路由模塊有沒有已經(jīng)添加，或者再每次添加之前判斷當(dāng)前請(qǐng)求頭是否已經(jīng)存在，如果存在刪除在添加。
2. 創(chuàng)建自定義HTTP模塊并注冊(cè)
在 .NET Framework 中，通過自定義 HTTP 模塊修改 HTTP 響應(yīng)頭，可以協(xié)助處理跨域問題。
我們右鍵解決方案，新建項(xiàng)目，創(chuàng)建 ??CustomHttpModules?? 模塊。
模塊內(nèi)創(chuàng)建 HeaderFilterHttpModule.cs 文件。
代碼如下 ：
using System;
using System.Web;
namespace CustomHttpModules
{
public class HeaderFilterHttpModule : IHttpModule
{
public void Init(HttpApplication context)
{
context.PreSendRequestHeaders += OnPreSendRequestHeaders;
}
public void Dispose()
{ }
void OnPreSendRequestHeaders(object sender, EventArgs e)
{
try
{
HttpApplication app = sender as HttpApplication;
if (app != null && app.Context != null && app.Context.Response != null)
{
var headers = app.Context.Response.Headers;
if (headers != null)
{
headers.Remove("Server");
headers.Remove("X-AspNet-Version");
headers.Remove("X-AspNetMvc-Version");
headers.Remove("X-Frame-Options");
headers.Remove("X-Powered-By");
// 添加CORS相關(guān)的頭信息
headers.Add("Access-Control-Allow-Origin", "*");
headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept");
}
}
}
catch (Exception ex)
{
// 記錄異常
}
}
}
}
創(chuàng)建完成后，我們到主項(xiàng)目注冊(cè)這個(gè)自定義的 HTTP 模塊。
打開 web.config 文件，找到 <configuration> 下的 <system.webServer> 標(biāo)簽，引入我們剛剛創(chuàng)建好的 HeaderFilterHttpModule 模塊。
<configuration>
<system.webServer>
<modules>
<add name="HeaderFilterHttpModule" type="CustomHttpModules.HeaderFilterHttpModule" />
</modules>
</system.webServer>
</configuration>
3. 測(cè)試增加CORS配置后的代碼
添加上述有關(guān)CORS的配置后，我們重新啟動(dòng) .NET Framework 項(xiàng)目，通過測(cè)試頁(yè)面點(diǎn)擊 Fetch Data 按鈕，給 http://localhost:80/Test.asmx/GetJsonData 接口發(fā)送請(qǐng)求。
可以看到我們得到了正確的返回值。
{
"MapPoints": [
{
"Coordinates": [
"118.87220827635",
"34.885061248714"
],
"Speed": "45.7",
"Time": "2024-05-13T13:02:09"
}
]
}
.NET WebService 跨域CORS問題完美解決。
四、CORS問題解決總結(jié)
通過配置 global.asax 全局文件，創(chuàng)建和注冊(cè)自定義 HTTP 模塊，我們成功地解決了 .NET WebService 中的 CORS 問題。這種方法的關(guān)鍵在于攔截和修改 HTTP 響應(yīng)頭，添加必要的 CORS 頭信息?？偨Y(jié)如下：
- 修改Global.asax文件：修改
Application_BeginRequest方法，修改全局請(qǐng)求頭參數(shù)。 - 創(chuàng)建自定義 HTTP 模塊：實(shí)現(xiàn)
IHttpModule接口，并在PreSendRequestHeaders事件中添加或移除 HTTP 頭信息。 - 注冊(cè) HTTP 模塊：在
Web.config文件中注冊(cè)自定義的 HTTP 模塊。 - 測(cè)試能否跨域：通過前端發(fā)送跨域請(qǐng)求來(lái)驗(yàn)證 CORS 配置是否正確。
通過這些步驟，開發(fā)者可以有效地解決跨域資源共享問題，確保前后端服務(wù)的順暢通信。在實(shí)際開發(fā)中，根據(jù)具體項(xiàng)目的需求，CORS 配置可能會(huì)有所不同，但核心思想和步驟是類似的。希望這篇博客能為你解決 CORS 問題提供有價(jià)值的幫助。
以上就是在.NET WebService中解決CORS問題的解決方案的詳細(xì)內(nèi)容，更多關(guān)于 .NET WebService CORS問題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章介紹了C#多線程之取消架構(gòu)，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章介紹了在WPF中使用FontAwesome字體圖標(biāo)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
C#語(yǔ)法相比其它語(yǔ)言比較獨(dú)特的地方（一）
這篇文章主要介紹了C#語(yǔ)法相比其它語(yǔ)言比較獨(dú)特的地方（一）,本文講解了switch語(yǔ)句可以用來(lái)測(cè)試string型的對(duì)象、多維數(shù)組、foreach語(yǔ)句、索引器和Property等內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了WPF如何實(shí)現(xiàn)視頻封面查看器，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以了解一下2022-11-11
使用linq to xml修改app.config示例(linq讀取xml)
這篇文章主要介紹了使用linq to xml修改app.config示例,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了C#中ManualResetEvent用法總結(jié)，幫助大家更好的理解和使用c#，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細(xì)介紹了C#求點(diǎn)集的最小包圍矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
C#中LINQ to Objects查詢的實(shí)現(xiàn)
LINQ to Objects是LINQ技術(shù)在C#中的一種應(yīng)用,它專門用于對(duì)內(nèi)存中的對(duì)象集合進(jìn)行查詢和操作,本文就詳細(xì)的介紹C#中LINQ to Objects查詢的實(shí)現(xiàn),感興趣的可以了解一下2023-08-08
C#中委托和事件在觀察者模式中的應(yīng)用實(shí)例
這篇文章主要介紹了C#中委托和事件在觀察者模式中的應(yīng)用,需要的朋友可以參考下2014-08-08