文件上传到Web API2无法使用Angular CLI(Webpack)代理

jjhzyzn0  于 2023-03-23  发布在  Webpack
关注(0)|答案(1)|浏览(132)

设置:

  • 操作系统:W10 Pro
  • 服务器:托管在IIS 10.0中的Web API 2(.Net 4.5.2)
  • 客户端:Angular 4.2.4(Angular CLI 1.4.9)
  • API URL:localhost/site/api
  • NG Url:localhost:4200

我有一个Angular CLI应用程序,在开发过程中利用内置的(Webpack)代理来调用MVC和Web API 2服务。该应用程序将在生产中的MVC应用程序中运行。所有HTTP调用都很好,除了当我尝试从输入[文件]中POST文件时,无论是在FormData中还是直接。
我在控制台中得到以下错误:

POST http://localhost:4200/site/api/import/fileUpload/225/1 net::ERR_CONNECTION_RESET

...在.post的.catch中:

Response with status: 0  for URL: null

下面是相关代码:

file-upload.service.ts

public startFileUpload(importdata: IFileImportData, files: any[] = []) {

    importdata.files = files.map((file: any) => {
        return {name: file.name};
    });

    let url = `${environment.apiUrl}import/setup`;
    let headers = new Headers();
    headers.set('Content-Type', 'application/json');
    let options = new RequestOptions({headers: headers});

    this._http.post(url, importdata)
        .map(response => {
            return response.json();
        })
        .catch(error => {
            console.log(`FileUploadService > import/setup > Error: ${error}`);
            return error;
        })
        .subscribe(
            key => {
                // options.headers.set('Content-Type', undefined);
                options.headers.set('Content-Type', 'multipart/form-data');
                // options.headers.set('Content-Type', 'application/json');

                files.forEach((file: any, index: number) => {
                    let url = `${environment.apiUrl}import/fileUpload/${key}/${index + 1}`;

                    let formData = new FormData();
                    formData.append('file', file, file.name);

                    let req = this._http
                        .post(url, formData, options)
                        .map(response => {
                            return response.json();
                        })
                        .catch(error => {
                            console.log(`FileUploadService > import/fileUpload > Error: ${error}`);
                            return error;
                        })
                        .subscribe();
                    // this._addUploading(key, req);
                });
            },
            error => {
                console.log(`FileUploadService > Error: ${error}`);
            }
        );
}
  • files:any[]是由组件中的输入[file]选择的文件数组 *

一般情况下,当您看到错误时Response with status:0 for URL:null这是一个CORS问题,但是如果我注解掉将文件添加到FormData的那一行(甚至向FormData添加其他值),它就可以工作了。我可以命中API端点,获得预期的响应,一切似乎都正常。这告诉我这不是CORS问题,而是其他问题。
我在其他几个地方向API提交值和对象都没有问题。只是文件上传的情况给我带来了问题。
为了确保这不是一个Angular 问题,我创建了一个XMLHttpRequest并尝试直接发布它,但没有成功。
有什么想法吗?
注意:由于应用程序安全限制等原因,我不能在服务器端使用CORS(即使在开发中)。

dy1byipe

dy1byipe1#

经过广泛的测试和忽略我从.Net得到的无用消息后,我发现请求到达服务器并被拒绝终止而不是被拒绝。原因是缺乏冗余配置。由于.Net应用程序虚拟托管在IIS中,我不仅需要应用程序的查询大小配置,我还需要一个稍微不同的版本,这个相同的配置为IIS…出于一些奇怪的原因。
不管怎样,这是我的台词:

<system.web>
  <httpRuntime targetFramework="4.5.2"  maxUrlLength="40960" maxQueryStringLength="2097151" maxRequestLength="2147483647" />
</system.web>

以及

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="2147483647" maxQueryString="2097151" maxUrl="40960"/>
    </requestFiltering>
  </security>
</system.webServer>

添加了这个之后,一切都开始正常工作了。
旁注:
我还必须从请求中删除“Content-Type”头,因为如果设置了content-type,Angular不会正确添加“boundary”元数据。

options.headers.delete('Content-Type');

希望这能节省一些时间和痛苦。

相关问题