使用 c# 和 jQuery 在预检请求中请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-02-27

【中文标题】使用 c# 和 jQuery 在预检请求中请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource in preflight request using c# and jQuery

【发布时间】：2019-12-10 18:51:50

【问题描述】：

我正在两个站点之间启用 cors。我已经在global.asax.cs 中启用了cors。

我仍然面临问题

请求的资源上没有“Access-Control-Allow-Origin”标头

当我在我的web.config 中添加时：

<customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD" />
    <add name="Access-Control-Allow-Headers" value="Origin, Authorization, X-Requested-With, Content-Type, Accept" />
</customHeaders>

然后我收到错误 - 只允许一个标头，不允许多个标头。

Request Header

Access-control-request-headrs : authorization , content-type
Access-control-request-method :GET
Origin- xyz.com

Response Header
Allow:OPTIONS,TRACE,GET,HEAD,POST
CONTENT-LENGHT :0

GENERAL
REQUEST URL: ABC.COM
RQUEST METHOD : OPTIONS
STATUS CODE:200 OK

【问题讨论】：

添加您已指定 URL 的 C# 代码或 Jquery 代码以调用另一个站点。

$.ajax( url: url, type: 'GET', withCredentials: true, headers: 'Authorization': authString, , dataType: 'json', success: function (response)

$.ajax( url: url, type: 'GET', withCredentials: true, headers: 'Authorization': authString, , dataType: 'json', crossDomain:true, 成功：函数（响应）

在您的 ajax 调用中添加 crossDomain:true 然后验证。

【参考方案1】：

您忘记将OPTIONS 添加到允许的方法列表中：

<customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, OPTIONS, DELETE, HEAD" />
    <add name="Access-Control-Allow-Headers" value="Origin, Authorization, X-Requested-With, Content-Type, Accept" />
</customHeaders>

将是允许 CORS 请求的标头的正确配置。 您的浏览器无法看到该端点上允许哪些方法，因为它的 OPTIONS 请求被拒绝。This MDN article about preflight 包含更多信息。

我还建议使用新的Fetch API 进行网络 API 调用。 这是一个例子：

fetch('example.com/apiendpoint', 
    mode: 'cors',
    credentials: 'include',
    headers:  'Authorization': authString 
).then(
    response => response.json()
); // parses JSON response into native javascript objects 

---

附带说明，您的示例 CORS 标头指定了所有来源，但明智的做法是仅包含您希望发出这些请求的来源。此外，在每个操作/控制器而不是站点范围内使用 CORS。