React + Quarkus + Auth0 的 CORS 问题

Question

我有一个用于身份验证和授权的 Quarkus 后端 + React 前端 + Auth0。 这是它的设置方式：

认证0

我创建了一个应用程序（设置为单页应用程序）并设置了以下选项。 我的前端运行在： localhost:3000 ，后端运行在： locahost:8080

• 允许的回调 URL： http://localhost:3000/callback
• 允许的注销 URL： http://localhost:3000
• 允许 Web 来源： http://localhost:3000
• 允许来源 (CORS)： http://localhost:3000

我还设置了一个 API，并在我的 Quarkus application.properties文件中设置了它的audience （详情如下）。 我在 API 设置中设置了create:manager权限，并将此权限授予用户角色admin 。

夸克

我遵循了Quarkus OIDC 指南，该指南展示了如何将 Quarkus 与 Keycloak 连接起来，但由于 Auth0 和 Keycloak 都是 OIDC 提供者，所以我猜它应该非常相似。

我的application.properties文件包含：

quarkus.http.cors=true

quarkus.oidc.auth-server-url=https://dev-xxxxxxxxxxxx.eu.auth0.com
quarkus.oidc.client-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
quarkus.oidc.credentials.secret=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
quarkus.oidc.application-type=web-app
quarkus.oidc.token.audience=xxxxxxxxxxxxxxxxxxxxxxxxxxxx

我正在尝试在我的后端创建一个Manager资源，但它只能由具有create:manager权限的用户创建，该权限授予 Auth0 中的admin用户角色。

我的 Controller 看起来像这样：

@Path("/rest/manager")
@ApplicationScoped
public class ManagerController {

    ...

    @POST
    @Path("/")
    @RolesAllowed("admin")
    public Manager createManager(@Valid ManagerView managerView) {
        return managerService.createManager(managerView);
    }
}

反应

在前端，我使用的是 React 和 Redux。我使用的是Auth0 React库。 我选择使用 react 库而不是 js 库，因为它更容易集成。

我用Auth0Provider包装了我的应用程序：

ReactDOM.render(
  <Auth0ProviderWithHistory>
    <App />
  </Auth0ProviderWithHistory>,
  document.getElementById('root') as HTMLElement
);

在我的 redux 操作中，我传递了用户令牌：

const EditableManagerRow = (props) => {
  const {getAccessTokenSilently} = useAuth0()
  const dispatch = useDispatch();
  ...
  
  return (
    <TableRow>
      ...
      <RowEditButtons
        onSave={async () => {
          const accessToken = await getAccessTokenSilently()
          dispatch(managerOperations.addManager({manager: updatedManager, accessToken}))
        }}
        />
    </TableRow>
  )

调度操作使用以下标头发出请求：

      .post<T>(url, params, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
        },
      })

此请求转到后端。 但是，我在浏览器中收到以下 CORS 错误：

XHR OPTIONS https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http://localhost:8080/rest/manager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff
CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (Reason: CORS request did not succeed). Status code: (null).

我试过的：

• 设置允许来源 (CORS)： http://localhost:3000, http://localhost:8080
• 设置允许的回调 URL： http://localhost:3000/callback, http://localhost:8080
• CORS 的不同application.properties设置，例如：

quarkus.http.cors.origins=http://localhost:3000
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with, Access-Control-Allow-Origin
quarkus.http.cors.methods=GET,OPTIONS,POST
quarkus.http.cors.exposed-headers=Access-Control-Allow-Origin,Authorization

但是，似乎没有任何效果。 我将非常感谢对此的任何帮助。

Answer 1

解决了这个问题，感谢这个演示。

问题是我在application.properties文件中使用了： quarkus.oidc.application-type=web-app 。 我将其更改为默认选项quarkus.oidc.application-type=service ，因此您实际上可以删除此行。 Quarkus 的行为基于此变量而有所不同。