Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource #1004

New Issue

2018-04-07T11:13:59Z

Tkd-Alex commented

2018-04-07 11:13:59 +00:00

(Migrated from github.com)

Hi, i've seen more issue with this error but the solution not work for me.

Angular Frontend:

ngOnInit() {
    this.uploader = new FileUploader({
      url: `${Constant.ENDPOINT}?action=3`,
      additionalParameter: {'path': this.path},
      autoUpload: false,
      isHTML5: true,
      filters: [],
      removeAfterUpload: false,
      disableMultipart: false,
      headers: [
        { name: 'Content-Type', value: 'multipart/form-data' },
        { name: 'Access-Control-Allow-Origin', value: '*' },
        { name: 'Access-Control-Allow-Methods', value: 'POST, OPTIONS, GET'},
        { name: 'Access-Control-Allow-Credentials', value: 'true'}
      ]
    });
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; console.log(file); };
    this.uploader.onBeforeUploadItem = (item) => { item.withCredentials = false; console.log(item); };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      const res = JSON.parse(response);
      [...]
    };
  }

PHP Backend:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,  X-Requested-With, Access-Control-Allow-Headers, Authorization');
header('Access-Control-Max-Age: 1000');
header("Access-Control-Allow-Credentials: true");
[...]
  case UPLOAD:
    if ($_SERVER['REQUEST_METHOD'] !== 'POST') response(400, "Method not allowed!", NULL);
    if (!isset($_POST['path'])) response(400, "Please provide a path", NULL);

    if (isset($_FILES['file'])) {
      if(isValidPath($_POST['path'])){
        $path = DEFAULT_PATH.$_POST['path'];
        $filename = $_FILES['file']['name'];
        $ext = '.'.pathinfo($filename, PATHINFO_EXTENSION);
        $md5Timestamp = md5($_FILES['file']['tmp_name']).$ext;
        $completeFilePath = $path."/".$md5Timestamp;

        if (move_uploaded_file($_FILES['file']['tmp_name'], $completeFilePath))
          response(200, "File uploaded!", $completeFilePath);
        else response(400, "Error upload file", NULL);

      }else response(403, "Direcory not allowerd", NULL);
    }else response(400, "Please provide a file to upload", NULL);
    break;

Error:

If i enable the exstension for Chrome "Allow-Control-Allow-Origin: *" my app work.
I've also tested the nodejs backend in demo page. Same error.

Hi, i've seen more issue with this error but the solution not work for me. ### Angular Frontend: ```javascript ngOnInit() { this.uploader = new FileUploader({ url: `${Constant.ENDPOINT}?action=3`, additionalParameter: {'path': this.path}, autoUpload: false, isHTML5: true, filters: [], removeAfterUpload: false, disableMultipart: false, headers: [ { name: 'Content-Type', value: 'multipart/form-data' }, { name: 'Access-Control-Allow-Origin', value: '*' }, { name: 'Access-Control-Allow-Methods', value: 'POST, OPTIONS, GET'}, { name: 'Access-Control-Allow-Credentials', value: 'true'} ] }); this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; console.log(file); }; this.uploader.onBeforeUploadItem = (item) => { item.withCredentials = false; console.log(item); }; this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => { const res = JSON.parse(response); [...] }; } ``` ### PHP Backend: ```php <?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type, X-Requested-With, Access-Control-Allow-Headers, Authorization'); header('Access-Control-Max-Age: 1000'); header("Access-Control-Allow-Credentials: true"); [...] case UPLOAD: if ($_SERVER['REQUEST_METHOD'] !== 'POST') response(400, "Method not allowed!", NULL); if (!isset($_POST['path'])) response(400, "Please provide a path", NULL); if (isset($_FILES['file'])) { if(isValidPath($_POST['path'])){ $path = DEFAULT_PATH.$_POST['path']; $filename = $_FILES['file']['name']; $ext = '.'.pathinfo($filename, PATHINFO_EXTENSION); $md5Timestamp = md5($_FILES['file']['tmp_name']).$ext; $completeFilePath = $path."/".$md5Timestamp; if (move_uploaded_file($_FILES['file']['tmp_name'], $completeFilePath)) response(200, "File uploaded!", $completeFilePath); else response(400, "Error upload file", NULL); }else response(403, "Direcory not allowerd", NULL); }else response(400, "Please provide a file to upload", NULL); break; ``` ### Error: ![image](https://user-images.githubusercontent.com/14061593/38454315-5513c516-3a65-11e8-85d8-7f9b119a9a56.png) _If i enable the exstension for Chrome "Allow-Control-Allow-Origin: *" my app work._ I've also tested the nodejs backend in demo page. Same error.

koenvanderlinden commented

2018-04-08 08:49:36 +00:00

(Migrated from github.com)

Can you check what headers are present in the request? Are all your provided headers missing? Or just the Allow-Control-Allow-Origin?
Do all browser types react the same way?

I'm asking this as it may be part of browser security. That it's not allowed to change the request origin, as your browser would be faking the origin/domain? Check https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work

Can you check what headers **are** present in the request? Are all your provided headers missing? Or just the Allow-Control-Allow-Origin? Do all browser types react the same way? I'm asking this as it may be part of browser security. That it's not allowed to change the request origin, as your browser would be faking the origin/domain? Check [https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work)

wellingtonfoz commented

2018-05-19 03:40:37 +00:00

(Migrated from github.com)

I have the exactly same problem. Did you find any way to solve this?

koenvanderlinden commented

2018-05-21 08:41:37 +00:00

(Migrated from github.com)

Please check #1018. The combination of Allow-Control-Allow-Origin:* and credentials: true could be a problem.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1004