Windows安全对话框窗口弹出。

4

错误描述

我们在 Windows 10 上进行开发,后端使用 ASP.NET Core 3.1 MVC。

在使用 React 开发应用程序时,Windows 安全对话框窗口会弹出,这真的很烦人。我们必须刷新页面。

首先,会显示以下图像:

enter image description here

然后上述对话框窗口被以下对话框窗口替换。它需要智能卡凭据:

enter image description here

应用程序设置

package.json 如下所示:

"devDependencies": {
    "@babel/cli": "7.14.3",
    "@babel/core": "7.14.3",
    "@babel/plugin-proposal-decorators": "7.14.2",
    "@babel/plugin-transform-runtime": "7.8.3",
    "@babel/preset-env": "7.14.4",
    "@babel/preset-react": "7.13.13",
    "@babel/preset-typescript": "7.13.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^11.2.7",
    "@types/jest": "^27.5.1",
    "@types/node": "14.17.1",
    "@types/react": "17.0.8",
    "@types/react-dom": "17.0.5",
    "@types/webpack": "5.28.0",
    "@typescript-eslint/eslint-plugin": "4.25.0",
    "@typescript-eslint/parser": "4.25.0",
    "agentkeepalive": "4.2.1",
    "axios-mock-adapter": "^1.21.1",
    "babel-loader": "8.2.2",
    "css-loader": "5.2.6",
    "eslint": "7.27.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "7.23.2",
    "express": "4.17.1",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "5.3.1",
    "husky": "6.0.0",
    "image-webpack-loader": "7.0.1",
    "jest": "^27.5.1",
    "lint-staged": "11.0.0",
    "prettier": "2.3.0",
    "react-hot-loader": "4.13.0",
    "rimraf": "3.0.2",
    "style-loader": "2.0.0",
    "ts-jest": "^27.1.3",
    "typescript": "4.3.2",
    "webpack": "5.38.1",
    "webpack-cli": "4.7.0",
    "webpack-dev-server": "3.11.2",
    "webpack-merge": "5.7.3"
},
"dependencies": {
    "@hot-loader/react-dom": "17.0.1",
    "@svgr/cli": "6.2.1",
    "@types/lodash": "4.14.170",
    "antd": "4.16.2",
    "axios": "^0.27.2",
    "classnames": "^2.3.1",
    "dotenv": "^16.0.1",
    "lodash": "4.17.21",
    "mobx": "6.3.2",
    "mobx-react": "7.2.0",
    "moment": "2.29.1",
    "process": "0.11.10",
    "react": "17.0.2",
    "react-base-table": "1.12.0",
    "react-dnd": "14.0.2",
    "react-dnd-html5-backend": "14.0.0",
    "react-dom": "17.0.2",
    "react-router-dom": "6.2.1",
    "react-sortable-hoc": "2.0.0",
    "ts-loader": "9.2.3"
}

此外,我们正在使用代理。这些设置来自于官方React文档中配置代理
此外,我们还在使用agentkeepalive
代理文件的配置如下所示:
// development config
require('dotenv').config()
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
const agent = require('agentkeepalive')

module.exports = (webpackConfigEnv, argv) =>
    merge(commonConfig(argv), {
        mode: 'development',
        entry: [
            'react-hot-loader/patch', // activate HMR for React
            'webpack-dev-server/client?http://localhost:3030', 
            'webpack/hot/only-dev-server',
            './index.tsx', // the entry point of our app
        ],
        devServer: {
            port: 3030,
            hot: true, // enable HMR on the server
            historyApiFallback: true,
            proxy: {
                '/api/*': {
                    target: argv.env.mock ? '' : process.env.API_URL,
                    secure: false,
                    changeOrigin: true,
                    agent: new agent({
                        maxSockets: 100,
                        keepAlive: true,
                        maxFreeSockets: 10,
                        keepAliveMsecs: 100000,
                        timeout: 6000000,
                        freeSocketTimeout: 90000, // free socket keepalive for 90 seconds
                    }),
                    onProxyRes: (proxyRes) => {
                        var key = 'www-authenticate'
                        proxyRes.headers[key] =
                            proxyRes.headers[key] && proxyRes.headers[key].split(',')
                    },
                },
            },
        },
        devtool: 'cheap-module-source-map',
        plugins: [
            new webpack.HotModuleReplacementPlugin(), // enable HMR globally
            new webpack.DefinePlugin({
                'process.env.appVersion': JSON.stringify(package.version),
                'process.env.isMockMode': JSON.stringify(argv?.env?.mock),
                'process.env.isDevelopment': true,
            }),
        ],
    })

当前行为

在使用 React 开发应用程序时,有时会突然弹出 Windows 安全对话框窗口,这真的很烦人。我们不得不刷新页面。

期望的行为

在使用 React 开发应用程序时,希望 Windows 安全对话框窗口不会突然弹出。

我们尝试过的方法

我们尝试设置 axios 的此选项,但是 "登录" 仍然会弹出。

axios.defaults.withCredentials = true;

更新:

以下是可能会返回带有www-authenticate头键的401响应的URL之一:

 http://localhost:3030/api/notifications

此外,有时其他方法也会返回401响应。不是总是同一个方法返回401响应。

输入图像描述


3
请分享您浏览器的开发工具中的网络分析结果。哪个 URL 返回带有 www-authenticate 头键的 401 响应? - Markus
@Markus谢谢您的评论!我已经更新了我的问题。请查看我的更新后的问题。 - Learner
1
请检查此答案:https://stackoverflow.com/questions/47811015/webpack-dev-server-hot-reloading-proxy-iis-express-with-windows-authentication - Jason Pan
因此,您的“代理”ASP.NET-api发出身份验证请求。它要求进行“Negotiate”或“NTLM”身份验证。您能否分享有关ASP.NET应用程序身份验证配置的更多信息?您是否使用IIS?您是否使用Kerberos? - Markus
@Markus 是的,我们正在使用IIS。此外,当我们在本地运行Visual Studio时也会出现这种情况。 - Learner
显示剩余5条评论
1个回答

0

你基于 IIS 的 api 服务器需要有效的身份验证。它要求使用 Negotiate ( 在这里查看),本质上是 Kerberos。你的浏览器接受此请求,但协商失败,因为你正尝试使用与在 IIS 中配置的 SPN 不同的基础 URL 访问 api URL 并且你没有使用 https

至少有两种可能性可以尝试:

  1. 对于开发来说,最好的方法是模拟对 api 服务器的所有调用。因此根本不会调用任何 IIS-服务器,也不需要身份验证。
  2. 尝试在开发 IIS 中切换关闭 Negotiate,改用 NTLM

抱歉,但我们没有符合条件的选项。 - Learner

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接