![](/img/trans.png)
[英]Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response
[英]Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response
网络核心应用程序和反应 JavaScript。 我正在做一些身份验证的概念证明。 我已经从 github 克隆了一些示例应用程序,并开发了 .net 核心 API 并尝试调用 ZDB974238714CA3ACE4DA8ACE4634。 我有以下代码在我的反应应用程序中调用 API。
这是 fetch.js
export const callApiWithToken = async(accessToken, apiEndpoint) => {
debugger;
const headers = new Headers();
const bearer = `Bearer ${accessToken}`;
headers.append("Authorization", bearer);
const options = {
method: "GET",
headers: headers
};
return fetch(apiEndpoint, options)
.then(response => response.json())
.catch(error => console.log(error));
}
下面是Hello.jsx
import { useEffect, useState } from "react";
import { MsalAuthenticationTemplate, useMsal, useAccount } from "@azure/msal-react";
import { InteractionRequiredAuthError, InteractionType } from "@azure/msal-browser";
import { loginRequest, protectedResources } from "../authConfig";
import { callApiWithToken } from "../fetch";
import { HelloData } from "../components/DataDisplay";
const HelloContent = () => {
const { instance, accounts, inProgress } = useMsal();
const account = useAccount(accounts[0] || {});
const [helloData, setHelloData] = useState(null);
useEffect(() => {
if (account && inProgress === "none" && !helloData) {
instance.acquireTokenSilent({
scopes: protectedResources.apiHello.scopes,
account: account
}).then((response) => {
callApiWithToken(response.accessToken, protectedResources.apiHello.endpoint)
.then(response => setHelloData(response));
}).catch((error) => {
// in case if silent token acquisition fails, fallback to an interactive method
if (error instanceof InteractionRequiredAuthError) {
if (account && inProgress === "none") {
instance.acquireTokenPopup({
scopes: protectedResources.apiHello.scopes,
}).then((response) => {
callApiWithToken(response.accessToken, protectedResources.apiHello.endpoint)
.then(response => setHelloData(response));
}).catch(error => console.log(error));
}
}
});
}
}, [account, inProgress, instance]);
return (
<>
{ helloData ? <HelloData helloData={helloData} /> : null }
</>
);
};
export const Hello = () => {
const authRequest = {
...loginRequest
};
return (
<MsalAuthenticationTemplate
interactionType={InteractionType.Redirect}
authenticationRequest={authRequest}
>
<HelloContent />
</MsalAuthenticationTemplate>
)
};
然后我在 my.Net 核心应用程序中配置了 CORS。 下面的代码在 ConfigureServices 方法中。
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("https://localhost:3000");
});
});
配置方法中的以下代码
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthentication();
我的反应应用程序在 https://localhost:3000 和 API 应用程序在 https://localhost:44367/weatherforecast 运行
当我运行应用程序时,我看到以下错误
Access to fetch at 'https://localhost:44367/weatherforecast' from origin 'https://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
我在.Net核心中添加了CORS,但仍然出现错误。 有人可以帮我理解这个问题并解决这个问题吗?
您在 Cors 配置中缺少Authorization
header。 可以使用以下选项:
options.AddPolicy("MyAllowHeadersPolicy",
builder =>
{
// requires using Microsoft.Net.Http.Headers;
builder.WithOrigins("https://localhost:3000")
.WithHeaders(HeaderNames.Authorization);
});
或者:
options.AddPolicy("MyAllowAllHeadersPolicy",
builder =>
{
builder.WithOrigins("https://localhost:3000")
.AllowAnyHeader();
});
文档: https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-5.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.