How to set the header "Access-Control-Allow-Credentials" to upload a file in angular 4?

Question

I am working on an angular 4 application in which I have a requirement to upload a file in the form of submit, for this I use the ng2-file-upload plugin. But I ran into a file upload problem. I am creating a upload.php file that completes the upload process. upload.php is as follows:

header("Access-Control-Allow-Origin: http://localhost:4200"); header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); if ($_SERVER['REQUEST_METHOD'] !== 'POST') { echo json_encode(array('status' => false)); exit; } $path = 'uploads/'; if (isset($_FILES['file'])) { $originalName = $_FILES['file']['name']; $ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION); $generatedName = md5($_FILES['file']['tmp_name']).$ext; $filePath = $path.$generatedName; if (!is_writable($path)) { echo json_encode(array( 'status' => false, 'msg' => 'Destination directory not writable.' )); exit; } if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) { echo json_encode(array( 'status' => true, 'originalName' => $originalName, 'generatedName' => $generatedName )); } } else { echo json_encode( array('status' => false, 'msg' => 'No file uploaded.') ); exit; } 

But I have the following error:

Failed to load http: //localhost/uploads/uploads.php : the response to the preliminary check request does not pass the access control check: the value of the "Access-Control-Allow-Credentials" header in the response is "which should be" true ", when the request credential mode is “include.” Origin ' http: // localhost: 4200 ' is therefore not allowed. The request credential mode initiated by XMLHttpRequest is controlled by the withCredentials attribute.

If any help please offer me, thanks in advance!

Answer 1

This is a secutiry browser question, not an Angular one. When you make a crossdomain AJAX request, if you want to send cookies (mainly authentication data), the browser needs to specify Access-Control-Allow-Credentials with true , indicating that this allows the external domain. The reason for these two headers is that the site may allow AJAX requests from another domain, but they may not want this domain to use any possible authorization cookies in the browser.

As an example of what this risk entails, you can write an application to access the Facebook API through AJAX. But if Facebook allowed you to send cookies that may exist in the browser, you can create publications as if you were an authenticated user, which, of course, cannot be allowed. By preventing existing cookies from being sent, the user must provide your application with their Facebook credentials in order to do something in their name.

In addition to this check, sending cookies via XMLHttp also does not work if the Access-Control-Allow-Origin parameter is set to "*". Domains must be explicitly added to ensure that you do not provide access to potentially dangerous sites.