我們正在使用帶有 React 17.0.2 的 ASP.NET Core 3.1 MVC。此外，還使用了 Windows 身份驗證。
通過閱讀本檔案，我們添加了一個代理檔案來代理對 ASP.NET MVC Core 的 API 呼叫
所以我們的開發組態檔dev.js如下所示：
// development config
const package = require('../../package.json')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
const commonConfig = require('./common')
module.exports = (webpackConfigEnv, argv) => {
return 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', // bundle the client for hot reloading,
'./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 ? '' : 'https://localhost:8800',
secure: false,
},
},
},
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,
}),
],
})
}
但是，身份驗證停止使用此配置。所有 API 呼叫都回傳 401 錯誤。
我認為CORS可以解決這個問題。但是，應用以下代碼后，身份驗證沒有開始作業：
public void ConfigureServices(IServiceCollection services)
{
// ... the other code is omitted for the brevity
services.AddCors();
// ... the other code is omitted for the brevity
services.AddAuthorization(options =>
{
options.AddPolicy("MyPolicy", policy =>
policy.Requirements.Add(new MyPolicyAuthorizationRequirement()));
});
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddSingleton<IAuthorizationHandler, MyPolicyAuthorizationRequirementHandler>();
services.AddScoped<IClaimsTransformation, WindowsAuthenticationClaimsTransformation>();
}
和Configure()方法：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseMiddleware<GlobalExceptionHandlerMiddleware>();
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseCookiePolicy();
app.UseStaticHttpContext();
app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyMethod());
app.UseAuthentication();
app.UseAuthorization();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=FooAction}/{id?}");
});
}
如果我構建 React 應用程式，那么身份驗證作業正常。有人知道出了什么問題嗎？任何幫助將不勝感激。
uj5u.com熱心網友回復：
我發現了一篇關于我們如何通過代理發送授權標頭的非常棒的文章。
所以我們需要通過agent來使用agent和發送httpsheaders。
需要安裝agentkeepalivenpm 包：
npm install -D agentkeepalive
完整的代理檔案如下所示：
// development 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',
'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 ? '' : 'https://localhost:8800/',
secure: false,
changeOrigin: true,
agent: new agent.HttpsAgent({
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,
}),
],
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483853.html