为什么会收到 Azure Key Vault No-cors 策略错误？-解网

问：

我收到此错误：

localhost：3000' 已被 CORS 策略阻止：对预检的响应请求未通过访问控制检查：否 “Access-Control-Allow-Origin”标头存在于请求的资源。如果不透明的响应满足您的需求，请将请求的 mode 设置为“no-cors”以获取禁用 CORS 的资源。

import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { SecretClient } from '@azure/keyvault-secrets';
import { useMsal, useIsAuthenticated } from '@azure/msal-react'

const App = () => {
    const { instance } = useMsal()
    const [secretValue, setSecretValue] = useState('');


useEffect(() => {

    const CurrentAccount = instance.getActiveAccount()
        const request = {
            scopes: ['openid', 'profile', 'user.read', 'user.read.all'],
            account: CurrentAccount
        }
        const response = await instance.acquireTokenSilent(request)
        console.log(response.accesstoken)//to get accesstoken code with single sign on.

      const getSecret = async () => {
            const vaultName = '<YOUR_KEY_VAULT_NAME>';
            const url = `https://${vaultName}.vault.azure.net/secrets/<YOUR_SECRET_NAME>?api-     version=7.0`;
            const headers = {
                 Authorization: `Bearer ${response.accesstoken}`
            };

      try {
        const response1 = await axios.get(url, { headers });
        setSecretValue(response1.data.value);
      } catch (error) {
        console.error('Error retrieving secret:', error);
      }
    };

    getSecret();
  }, []);

  return (
    <div>
      <p>Secret value: {secretValue}</p>
    </div>
  );
};

export default App;

reactjs axios cors azure-keyvault azure-secrets

module.exports = async function (context, req) {
    context.res = {
        status: 200,
        headers: {
            'Access-Control-Allow-Origin': '<Your React App Origin>',
            'Access-Control-Allow-Methods': 'GET, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type, Authorization'
        },
        body: /* Your response body here */
    };
};

在门户中：

enter image description here

我注意到您提供的代码存在问题。似乎存在缩进问题，请再次检查，并且关键字是在异步函数之外使用的。await

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useMsal } from '@azure/msal-react';  // Remove SecretClient import

import logo from './logo.svg';
import './App.css';

function App() {
  const { instance } = useMsal();
  const [secretValue, setSecretValue] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const currentAccount = instance.getActiveAccount();
        const request = {
          scopes: ['openid', 'profile', 'user.read', 'user.read.all'],
          account: currentAccount,
        };
        const response = await instance.acquireTokenSilent(request);

        const vaultName = ' ';
        const secretName = ' ';
        const url = `https://${vaultName}.vault.azure.net/secrets/${secretName}?api-version=7.0`;

        const headers = {
          Authorization: `Bearer ${response.accessToken}`,
        };

        const response1 = await axios.get(url, { headers });
        setSecretValue(response1.data.value);
      } catch (error) {
        console.error('Error retrieving secret:', error);
      }
    };

    fetchData();
  }, [instance]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Secret value: <strong>{secretValue}</strong>
        </p>
        <p>
          Learn <a
            className="App-link"
            href="https://reactjs.org"
           
            rel="noopener noreferrer"
          >
            React
          </a>
        </p>
      </header>
    </div>
  );
}

export default App;

结果：

enter image description here

上一个：Azure Databricks 不会从 RBAC 访问密钥保管库权限错误

下一个：Az CLI 第一个请求在无状态计算机中需要更长的时间

为什么会收到 Azure Key Vault No-cors 策略错误？

Why do I get an Azure key Vault No-cors policy error?

评论