request faild #705

New Issue

2017-03-28T07:30:49Z

wengjincheng commented

2017-03-28 07:30:49 +00:00

(Migrated from github.com)

I use angualr2 and my backend is koa2,when i use ng2-file-upload,there is my TS code `import { Component } from '@angular/core';
import { UserService } from './server';
import {FileUploader} from "ng2-file-upload";

@Component({
moduleId: module.id,
selector: 'my-edit',
templateUrl: '../templates/editpage.html',
styleUrls: ['../css/editPage.min.css'],
providers: [UserService]
})

export class EditPage {
title:any;
content:any;
image:any;
author:any;
url:any = 'http://localhost:3005/api/createTodayFocus';
data:any = {};
closeResult: string;
tip:any = '';
type:any = 0;
constructor(private userService: UserService) { }
submitAll(content){
this.data = {title:this.title,content:this.content,image:this.image,author:this.author,type:this.type};
this.userService.postNewsData(this.url,this.data)
.subscribe(
data =>{
console.log(data);
this.tip = data;
this.title = '';
this.content = '';
this.image = '';
this.author = '';
this.type = '0';
}
)
}

public uploader:FileUploader = new FileUploader({
    url: "http://localhost:3005/api/uploadImage",
    method: "POST",
    itemAlias: "uploadedfile"
});


selectedFileOnChanged(event:any) {

    console.log(event.target.value);
    let value = event.target.value;
    this.image = value.split('fakepath\\');
    console.log(this.image[1]);
}

uploadFile() {
    for(let item of this.uploader.queue){
      console.log(item._file.name);
    }

    this.uploader.queue[0].onSuccess = function (response, status, headers) {
      
        if (status == 200) {
        
            let tempRes = JSON.parse(response);
            console.log(tempRes);
        } else {
        
            alert("error");
        }
    };
    this.uploader.queue[0].upload(); 
}

} and HTML code <input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/> <p *ngFor="let item of uploader.queue"> {{item?.file?.name}} <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> </p>

when i upload image,return this XMLHttpRequest cannot load http://localhost:3005/api/uploadImage. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

My backend have already fixed cors, so, why?

I use angualr2 and my backend is koa2,when i use ng2-file-upload,there is my TS code `import { Component } from '@angular/core'; import { UserService } from './server'; import {FileUploader} from "ng2-file-upload"; @Component({ moduleId: module.id, selector: 'my-edit', templateUrl: '../templates/editpage.html', styleUrls: ['../css/editPage.min.css'], providers: [UserService] }) export class EditPage { title:any; content:any; image:any; author:any; url:any = 'http://localhost:3005/api/createTodayFocus'; data:any = {}; closeResult: string; tip:any = ''; type:any = 0; constructor(private userService: UserService) { } submitAll(content){ this.data = {title:this.title,content:this.content,image:this.image,author:this.author,type:this.type}; this.userService.postNewsData(this.url,this.data) .subscribe( data =>{ console.log(data); this.tip = data; this.title = ''; this.content = ''; this.image = ''; this.author = ''; this.type = '0'; } ) } public uploader:FileUploader = new FileUploader({ url: "http://localhost:3005/api/uploadImage", method: "POST", itemAlias: "uploadedfile" }); selectedFileOnChanged(event:any) { console.log(event.target.value); let value = event.target.value; this.image = value.split('fakepath\\'); console.log(this.image[1]); } uploadFile() { for(let item of this.uploader.queue){ console.log(item._file.name); } this.uploader.queue[0].onSuccess = function (response, status, headers) { if (status == 200) { let tempRes = JSON.parse(response); console.log(tempRes); } else { alert("error"); } }; this.uploader.queue[0].upload(); } }` ` and HTML code `<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/> <p *ngFor="let item of uploader.queue"> {{item?.file?.name}} <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> </p>` when i upload image,return this `XMLHttpRequest cannot load http://localhost:3005/api/uploadImage. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.` My backend have already fixed cors, so, why?

Wizz14 commented

2017-03-30 07:08:48 +00:00

(Migrated from github.com)

try this

ngAfterViewInit() {
   this.uploader.onAfterAddingFile = (item => {
      item.withCredentials = false;
   });
}

credit : https://github.com/valor-software/ng2-file-upload/issues/399

try this ```javascript ngAfterViewInit() { this.uploader.onAfterAddingFile = (item => { item.withCredentials = false; }); } ``` credit : https://github.com/valor-software/ng2-file-upload/issues/399

👍 22 ❤️ 6 🎉 5

sambanthar commented

2017-12-21 09:03:44 +00:00

(Migrated from github.com)

thanks for @Wizz14

anantdhas commented

2018-06-26 12:02:50 +00:00

(Migrated from github.com)

thanks for @Wizz14 ...!!

silviurdr commented

2020-11-17 19:19:17 +00:00

(Migrated from github.com)