Angular 2和ng2-file-upload

我正在將應用程序寫入Angular，並且必須上傳文件。網絡顯示我的狀態：200，但沒有響應，我的後端沒有收到任何文件。Angular 2和ng2-file-upload

爲什麼請求方法是OPTION和CORS（在chrome中）？ Chrome控制檯：對預檢請求的響應未通過訪問控制檢查：憑證標誌爲'true'，但'Access-Control-Allow-Credentials'標頭爲''。允許憑證必須是「真」。因此來源不允許訪問。 enter image description here

火狐：火狐不會有CONSOL錯誤 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' 
)

來源

2017-02-28 tetrafishka

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

由於簡單的解決方案，你可以安裝CORS擴展-origin

所有訪問您可以從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');

來源

2017-04-08 14:06:51

Angular 2和ng2-file-upload

回答

相關問題