Javascript 如何在React中调用外部端点，并获得401弹出窗口以进行身份验证？

我构建了一个应用程序，其中包含运行在端口4002上的客户端（带有React）和服务器端（带有Node.js和Express）

在react中，我想调用一个受基本身份验证保护的特定端点（例如./test）。当调用端点时，作为响应，它会给我一个401错误和一个

WWW-Authenticate:Basic-realm='Node'

，并触发弹出窗口。这正是我想要的

客户端

function App() {
  const [authorizationToken, setAuthorizationToken] = useState(null)
  useEffect(() => {
     fetch('/test', {
       method: 'GET'
     }).then(response => {
       response.json().then(json => setAuthorizationToken(json.token)) 
     })
  },[])
  return (
     <div>Welcome</div>
  );
}

const express = require('express')
const auth = require('basic-auth')

const app = express()

app.get('/test', async(req, res) => {
    let user = auth(req)
    if ( user === undefined ) {
        res.statusCode = 401
        res.setHeader('WWW-Authenticate', 'Basic realm="Node"')
        res.end('Unauthorized')
    } else {
        console.log(user)
        res.setHeader('Content-Type', 'application/json')
        res.send({token : 'Basic '+ Buffer.from(`${user.name}:${user.pass}`).toString('base64')})    
    }
})

这个很好用。但现在我想访问localhost上的另一个端口（端口7071）。在那里，我有另一个服务器运行相同的代码。React客户端不属于在端口7071上运行的服务器，这就是为什么我编写的代码有点不同：

function App() {
  const [authorizationToken, setAuthorizationToken] = useState(null)
  useEffect(() => {
     fetch('http://localhost:7071/test', {
       method: 'GET'
     }).then(response => {
       response.json().then(json => setAuthorizationToken(json.token)) 
     })
  },[])
  return (
     <div>Welcome</div>
  );
}

函数应用程序（）{
常量[authorizationToken，setAuthorizationToken]=useState（null）
useffect（（）=>{
取（'http://localhost:7071/test', {
方法：“获取”
})。然后（响应=>{
response.json（）.then（json=>setAuthorizationToken（json.token））
})
},[])
返回(
欢迎
);
}

注意fetch字符串的变化。（另外，我在浏览器中处理了CORS错误，这不是问题）。当我运行这个时，我只得到401错误，但没有弹出窗口

我还注意到将

fetch（'/test'，{method'GET'}）

更改为

fetch（'test'）http://localhost:4002/test“，{method:'GET'}）

不会触发弹出窗口

为什么会发生这种情况？即使在尝试访问外部api时，我的获取如何触发弹出窗口？如果我不能使用fetch不是问题，我只想从react客户端触发7071的弹出窗口

多谢各位