Net 核心应用程序并响应 JavaScript。我正在做一些认证概念的证明。我已经从 github 克隆了一些示例应用程序并开发了 .net 核心 API 并尝试调用该 API。我有以下代码可以在我的 React 应用程序中调用 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>
)
};
然后我在我的 .Net 核心应用程序中配置了 CORS。下面的代码在 ConfigureServices 方法中。
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("https://localhost:3000");
});
});
下面配置方法中的代码
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthentication();
我的 React 应用程序运行在 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,但仍然出现错误。有人可以帮助我了解问题并解决这个问题吗?
答案 0 :(得分:0)
您的 Cors 配置中缺少 Authorization
标头。可以使用以下选项:
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