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

回答

相关问题