dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

CORS problem #1018

New Issue
Closed
opened 2018-05-08 11:16:04 +00:00 by hasanenalbana · 8 comments
hasanenalbana commented 2018-05-08 11:16:04 +00:00 (Migrated from github.com)
Copy Link

Hello,

When using this library to upload files to my API I get:

Failed to load http://localhost:8000/index.php/api/resources/logo: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 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 Code looks like this:

this.uploader =  new FileUploader(
                {
                    url: this.config.getApiUrl()+this._fieldConfig.uploadUrl,
                    isHTML5: true,
                    method: 'POST',
                    itemAlias: 'file',
                    authTokenHeader:  'authorization',
                    authToken: 'Bearer '+localStorage.getItem(this.config.tokenName),
                 }
         );

The initial OPTION requests returns 200 OK with:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization , content-type, x-xsrf-token
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Allow: POST
Cache-Control: no-cache, private
Connection: close
Content-Type: text/html; charset=UTF-8
Date: Tue, 08 May 2018 11:02:26 GMT
Host: localhost:8000
X-Powered-By: PHP/7.0.28-0ubuntu0.16.04.1

To override the issue, I had to disable one line in file-uploader.class.js:

//xhr.withCredentials = item.withCredentials;

Now files are being send to the API (Laravel).

Hello, When using this library to upload files to my API I get: `Failed to load http://localhost:8000/index.php/api/resources/logo: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 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 Code looks like this: ``` this.uploader = new FileUploader( { url: this.config.getApiUrl()+this._fieldConfig.uploadUrl, isHTML5: true, method: 'POST', itemAlias: 'file', authTokenHeader: 'authorization', authToken: 'Bearer '+localStorage.getItem(this.config.tokenName), } ); ``` The initial OPTION requests returns 200 OK with: ``` Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization , content-type, x-xsrf-token Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS Access-Control-Allow-Origin: * Allow: POST Cache-Control: no-cache, private Connection: close Content-Type: text/html; charset=UTF-8 Date: Tue, 08 May 2018 11:02:26 GMT Host: localhost:8000 X-Powered-By: PHP/7.0.28-0ubuntu0.16.04.1 ``` To override the issue, I had to disable one line in file-uploader.class.js: `//xhr.withCredentials = item.withCredentials;` Now files are being send to the API (Laravel).
👍 1
koenvanderlinden commented 2018-05-08 13:25:11 +00:00 (Migrated from github.com)
Copy Link

The problem here is that the browser does not allow a combination of sending credentials and a wildcard origin. Its by design.

So the error message is "the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'."

The CORS response should be:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8000

So you have to change CORS response on the server side.

Changing code:
//xhr.withCredentials = item.withCredentials;

will result that you will not send credentials. So it will not violate the wildcard + credentials combination.

You could also do this:
this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
so you don't need to change the ng2-file-upload source files.

The problem here is that the browser does not allow a combination of sending credentials and a wildcard origin. Its by design. So the error message is "the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'." The CORS response should be: > Access-Control-Allow-Credentials: true > Access-Control-Allow-Origin: http://localhost:8000 So you have to change CORS response on the server side. Changing code: `//xhr.withCredentials = item.withCredentials;` will result that you will not send credentials. So it will not violate the wildcard + credentials combination. You could also do this: `this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }; ` so you don't need to change the ng2-file-upload source files.
👍 27
hasanenalbana commented 2018-05-08 14:02:01 +00:00 (Migrated from github.com)
Copy Link

Thank you. It did work for me when I changed the wildcard in the past, however, I am writing an application which will get deployed at thousands of sites with different host names. So it won't be possible to predict the hostname easily.

Thank you. It did work for me when I changed the wildcard in the past, however, I am writing an application which will get deployed at thousands of sites with different host names. So it won't be possible to predict the hostname easily.
koenvanderlinden commented 2018-05-08 14:28:45 +00:00 (Migrated from github.com)
Copy Link

@hasanenalbana Maybe your application can inspect the host name from the request and set it in the CORS response. This should support any number of sites.

@hasanenalbana Maybe your application can inspect the host name from the request and set it in the CORS response. This should support any number of sites.
GermanAngarita commented 2018-06-07 21:57:39 +00:00 (Migrated from github.com)
Copy Link

Thank this work for me!!!!

Thank this work for me!!!!
moda20 commented 2018-10-03 12:49:40 +00:00 (Migrated from github.com)
Copy Link

What if i need to sent an authkey with the file upload request, do i need to set to false the credentials ? because if i do i still get a not authorized response from my API endpoint.

What if i need to sent an authkey with the file upload request, do i need to set to false the credentials ? because if i do i still get a not authorized response from my API endpoint.
helliojr commented 2019-07-08 23:02:13 +00:00 (Migrated from github.com)
Copy Link

The problem here is that the browser does not allow a combination of sending credentials and a wildcard origin. Its by design.

So the error message is "the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'."

The CORS response should be:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8000

So you have to change CORS response on the server side.

Changing code:
//xhr.withCredentials = item.withCredentials;

will result that you will not send credentials. So it will not violate the wildcard + credentials combination.

You could also do this:
this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
so you don't need to change the ng2-file-upload source files.

Works for me. Thanks!

> The problem here is that the browser does not allow a combination of sending credentials and a wildcard origin. Its by design. > > So the error message is "the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'." > > The CORS response should be: > > > Access-Control-Allow-Credentials: true > > Access-Control-Allow-Origin: http://localhost:8000 > > So you have to change CORS response on the server side. > > Changing code: > `//xhr.withCredentials = item.withCredentials;` > > will result that you will not send credentials. So it will not violate the wildcard + credentials combination. > > You could also do this: > `this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }; ` > so you don't need to change the ng2-file-upload source files. Works for me. Thanks!
patilsumit commented 2020-01-28 05:19:04 +00:00 (Migrated from github.com)
Copy Link

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

this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
👍 1
patilsumit commented 2020-01-28 05:19:21 +00:00 (Migrated from github.com)
Copy Link

This is wokirng for me

This is wokirng for me
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
greenkeeper
help wanted
in progress
invalid
need to reproduce
question
status: pending
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
allan medjedovic root sabhas
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1018
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?