Angular 2 and ng2-file-upload - django

Question

I am re writing an application into Angular and have to upload a file. The network shows me status: 200 but there is no response and my back end is not receiving any file.
Why Request Method is OPTION and CORS(in chrome) ?
Chrome:
chrome console: Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin is therefore not allowed access.
enter image description here
Firefox:
firefox not has consol error
enter image description here
My cod:
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 using
CORS_ORIGIN_WHITELIST = (
'localhost:4200'
)

Answer 1

I think the problem is for calling localhost from google chrome
As simple solution you can install CORS extension to all access -origin
You can install it from here
Also you can add these headers in your API response
'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');