Angular 2和ng2-file-upload

Question

我正在將應用程序編寫為Angular，並且必須上傳文件。 網絡向我顯示狀態：200，但是沒有響應，我的后端沒有收到任何文件。

為什么請求方法是OPTION和CORS（在Chrome中）？

Chrome：Chrome控制台：對預檢請求的響應未通過訪問控制檢查：憑據標志為“ true”，但“ Access-Control-Allow-Credentials”標頭為“”。 允許使用憑據必須為“ true”。 因此，不允許訪問原點。 在此處輸入圖片說明

Firefox：firefox沒有控制台錯誤，請在此處輸入圖片描述

我的鱈魚：

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

我認為問題是從谷歌瀏覽器調用本地主機

作為簡單的解決方案，您可以將CORS擴展安裝到所有訪問源

您可以從這里安裝

您也可以在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');