Angular 2 和 ng2-file-upload

Question

我正在将应用程序重新编写到 Angular 中并且必须上传文件。网络向我显示状态：200 但没有响应，我的后端没有收到任何文件。

为什么请求方法是 OPTION 和 CORS(in chrome)？

铬： chrome 控制台：对预检请求的响应未通过访问控制检查：凭据标志为“true”，但“Access-Control-Allow-Credentials”标头为“”。必须为“true”才能允许凭据。因此不允许 Origin 访问。 enter image description here

火狐： Firefox 没有控制台错误 enter image description here

我的鳕鱼：

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

const URL = 'http://127.0.0.1:8000/api/v1/upload/';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  public uploader: FileUploader;

  constructor()
  {
    this.initUpload()
  }

  ngOnInit() {
  }

  initUpload() {
    this.uploader = new FileUploader({
      url: URL,
      method: 'POST',
      headers: [
        {name: 'Access-Control-Allow-Credentials', value: 'true'},
        {name:'Access-Control-Allow-Origin', value: '*'}
      ]
    });
  }
}
--------------------------------------------    
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { FileUploadModule } from 'ng2-file-upload';

import { AppComponent } from './app.component';
import { UploadComponent } from './upload/upload.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FileUploadModule
  ],
  declarations: [
    AppComponent,
    UploadComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
--------------------------------------------
        <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

        <table class="table">
            <thead>
            <tr>
                <th width="50%">Name</th>
                <th>Size</th>
                <th>Progress</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of uploader.queue">
                <td><strong>{{ item.file.name }}</strong></td>
                <td nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
                <td>
                    <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                </td>
                <td class="text-center">
                    <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                    <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                    <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                </td>
                <td nowrap>
                    <button type="button" class="btn btn-success btn-xs"
                            (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span> Upload
                    </button>
                    <button type="button" class="btn btn-warning btn-xs"
                            (click)="item.cancel()" [disabled]="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    </button>
                    <button type="button" class="btn btn-danger btn-xs"
                            (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
                </td>
            </tr>
            </tbody>
        </table>

django 使用

CORS_ORIGIN_WHITELIST = (
    'localhost:4200'
)

Answer 1

我认为问题在于从谷歌浏览器调用 localhost

作为简单的解决方案，您可以将 CORS 扩展安装到所有访问源

你可以从here安装它

您也可以在 API 响应中添加这些标头

 'Access-Control-Allow-Origin', 'http://mysite')
 'Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
 'Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');