Angular 7, Node JS, IIS, pm2, ERR_CONNECTION_RESET 上传大文件时
Angular 7, Node JS, IIS, pm2, ERR_CONNECTION_RESET when upload big files
有人可以帮助我吗?我遇到了这样的问题。当我尝试将 150+MB 的大文件上传到服务器时,连接立即中断并出现此错误 ERR_CONNECTION_RESET。只有在与发布 API 交互时才会发生这种情况。在本地,一切正常。
在前端,我使用Angular 7.选中的文件存储在FormData中,整个表单传给post请求。这是前端代码的一部分:
<div class="row">
<div class="col-md-12">
<div class="form-group required">
<label class="col-form-label font-weight-bold">{{
'form.upload.build' | resource
}}</label>
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="unityBuild"
(change)="onFileChange($event, 'unityBuild')"
accept="zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"
/>
<label class="custom-file-label">{{ item.unityBuildPath }}</label>
</div>
</div>
</div>
</div>
this.form = this.formBuilder.group({
title: new FormControl('', [Validators.required]),
unityBuild: new FormControl(null),
thumbnail: new FormControl(null),
});
submit() {
this.hasSubmitted = true;
if (!this.form.valid) {
return;
}
this.Loading = true;
if (this.form.value.id) {
this.update(this.form.value);
} else {
this.add(this.form.value);
}
}
API 适用于节点 js、pm2 和 IIS。还添加了 Multer 来处理大文件。
这是 API 的片段:
import 'reflect-metadata';
import { createConnection } from 'typeorm';
import * as express from 'express';
import * as bodyParser from 'body-parser';
import routes from './routes';
import * as multer from 'multer';
import * as os from 'os';
//Connects to the Database -> then starts the express
createConnection()
.then(async connection => {
// Create a new express application instance
const app = express();
app.use(function(req, res, next) {
//res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header(
'Access-Control-Allow-Methods',
'GET,HEAD,OPTIONS,POST,PUT,DELETE'
);
res.header(
'Access-Control-Allow-Headers',
'Authorization, Token, Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
);
next();
});
app.use('/public', express.static('public'));
//app.use(bodyParser.json());
app.use(express.json());
app.use(express.urlencoded());
let tempDir = os.tmpdir();
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, tempDir);
},
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now());
}
});
let upload = multer({
storage: storage
});
app.use(
upload.fields([
{ name: 'unityBuild', maxCount: 1 },
{ name: 'thumbnail', maxCount: 1 }
])
);
app.use(express.static('public'));
//Set all routes from routes folder
app.use('/api', routes);
app.use(errorHandler);
app.listen(process.env.PORT, () => {
console.log(`Server started on port ${process.env.PORT}!`);
});
})
.catch(error => console.log(error));
const router = Router();
router.post("/scenes", mdlwr.checkAccess,checkMultipart,new ScenesController().addScenes);
发送后,请求不进入控制器方法。 web.config在服务器上添加了下面的配置,但是并没有解决问题。
web.config Angular
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="4294967290" />
</requestFiltering>
</security>
</system.webServer>
</configuration>
web.config API
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="http://localhost:8080/{R:1}" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="4294967290" />
</requestFiltering>
</security>
</system.webServer>
</configuration>
编辑
问题出在 Cloudflare,API 由 Cloudflere 代理,导致错误。
有人可以帮助我吗?我遇到了这样的问题。当我尝试将 150+MB 的大文件上传到服务器时,连接立即中断并出现此错误 ERR_CONNECTION_RESET。只有在与发布 API 交互时才会发生这种情况。在本地,一切正常。
在前端,我使用Angular 7.选中的文件存储在FormData中,整个表单传给post请求。这是前端代码的一部分:
<div class="row">
<div class="col-md-12">
<div class="form-group required">
<label class="col-form-label font-weight-bold">{{
'form.upload.build' | resource
}}</label>
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="unityBuild"
(change)="onFileChange($event, 'unityBuild')"
accept="zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"
/>
<label class="custom-file-label">{{ item.unityBuildPath }}</label>
</div>
</div>
</div>
</div>
this.form = this.formBuilder.group({
title: new FormControl('', [Validators.required]),
unityBuild: new FormControl(null),
thumbnail: new FormControl(null),
});
submit() {
this.hasSubmitted = true;
if (!this.form.valid) {
return;
}
this.Loading = true;
if (this.form.value.id) {
this.update(this.form.value);
} else {
this.add(this.form.value);
}
}
API 适用于节点 js、pm2 和 IIS。还添加了 Multer 来处理大文件。 这是 API 的片段:
import 'reflect-metadata';
import { createConnection } from 'typeorm';
import * as express from 'express';
import * as bodyParser from 'body-parser';
import routes from './routes';
import * as multer from 'multer';
import * as os from 'os';
//Connects to the Database -> then starts the express
createConnection()
.then(async connection => {
// Create a new express application instance
const app = express();
app.use(function(req, res, next) {
//res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header(
'Access-Control-Allow-Methods',
'GET,HEAD,OPTIONS,POST,PUT,DELETE'
);
res.header(
'Access-Control-Allow-Headers',
'Authorization, Token, Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
);
next();
});
app.use('/public', express.static('public'));
//app.use(bodyParser.json());
app.use(express.json());
app.use(express.urlencoded());
let tempDir = os.tmpdir();
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, tempDir);
},
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now());
}
});
let upload = multer({
storage: storage
});
app.use(
upload.fields([
{ name: 'unityBuild', maxCount: 1 },
{ name: 'thumbnail', maxCount: 1 }
])
);
app.use(express.static('public'));
//Set all routes from routes folder
app.use('/api', routes);
app.use(errorHandler);
app.listen(process.env.PORT, () => {
console.log(`Server started on port ${process.env.PORT}!`);
});
})
.catch(error => console.log(error));
const router = Router();
router.post("/scenes", mdlwr.checkAccess,checkMultipart,new ScenesController().addScenes);
发送后,请求不进入控制器方法。 web.config在服务器上添加了下面的配置,但是并没有解决问题。
web.config Angular
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="4294967290" />
</requestFiltering>
</security>
</system.webServer>
</configuration>
web.config API
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="http://localhost:8080/{R:1}" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="4294967290" />
</requestFiltering>
</security>
</system.webServer>
</configuration>
编辑
问题出在 Cloudflare,API 由 Cloudflere 代理,导致错误。