Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

Viewed 97 times

I am trying to make a login page from cross domain but I couldn't solve the problem, the error is:

XMLHttpRequest cannot load http://localhost/testing/resp.php. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

My Javascript code is:

$('#login').click(function(){
		var username = $('#uname').val();
		var password = $('#pass').val();
		var result = $('.result');
		result.text('loading....');

		if (username != '' && password !=''){
			var urltopass = 'action=login&username='+username+'&password='+password;
			$.ajax({
				type: 'POST',
				data: urltopass,
				headers: {"Access-Control-Allow-Headers": "Content-Type"},
				url: 'http://localhost/testing/resp.php',
				crossDomain: true,
				cache: false,
				success: function(responseText){
					console.log(responseText);
					if(responseText== "0"){
						result.text('incorrect login information');
					} else if (responseText == "1"){
						window.location="http://localhost/testing/home.php";
					} else{
						alert('error in sql query n' + responseText);
					}
				}
			});
		} else return false;
	});

The PHP code for http://localhost/testing/resp.php :

<?php
	include "db.php"; //Connecting to database

	if (!isset($_SERVER['HTTP_ORIGIN'])) {
		echo "This is not cross-domain request";
    exit;
}
	header("Access-Control-Allow-Origin: *");
	header("Access-Control-Allow-Credentials: true");
	header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
	header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
	header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies
	header("Content-Type: application/json; charset=utf-8");

	if (isset($_POST['action']) && $_POST['action'] == 'login'){
		$uname = $_POST['username'];
		$pass = $_POST['password'];

		$sql = "SELECT * FROM loginajax WHERE username='$uname' AND password='$pass'";
	
		$rs=$conn->query($sql);

		if (mysqli_num_rows($rs) <= 0){
			echo "0";
		} else {
			echo "1";
		}
		
	} else echo "this is not Login";

?>

Answers

remove this:

headers: {"Access-Control-Allow-Headers": "Content-Type"},

from your jQuery.ajax call.

The server responds with a Access-Control-Allow-Headers header, the client doesn't send it to the server.

The client sends a Access-Control-Request-Headers to request allowing certain headers, the server responds back with with a Access-Control-Allow-Headers that lists the actual headers its going to allow. The client does not get to demand what headers are allowed.

Friday, September 30, 2022

dietmar_kühl

The server (that the POST request is sent to) needs to include the Access-Control-Allow-Headers header (etc) in its response. Putting them in your request from the client has no effect.

This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type request header, and so on) – the client cannot decide for itself that a given server should allow CORS.

Friday, October 21, 2022

nl-x

Set the dataType to "JSONP" on your $.ajax() call. You'll have to make sure the response is properly formatted for it to work. Wikipedia has a good section on JSONP.

Wednesday, October 12, 2022

pierre_labastie

After some testing, I found the solution. I put the allow method on the header as below, then it works. I don't know why "*" doesn't work.

headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");

Thursday, December 22, 2022

prabudda_sri_rahal

You will need to make proxy for cross-domain ajax requests.

Usual scenario looks like this:

Client send ajax request to server
Your server forwards request to external/remote server
Waiting on response from remote server
Parse and process response from remote server
Send response back to client

If you are using php you can send requests with curl, and it is pretty easy to implement. I have wrote article on this topic recently http://www.svlada.com/proxy-ajax-requests-curl-and-symfony-2/.

Friday, November 25, 2022

judge_bread

Try this in backend : app/Http/Middleware/Cors.php

public function handle($request, Closure $next)
{
return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
OPTIONS');
}

app/Http/Kernel.php $routedMiddleware array add

'cors' => AppHttpMiddlewareCors::class,

Route/api.php Route::group(['middleware' => 'cors'], function () {

Route::put('/v1/employees', 'Employees@store');

});

Thursday, August 18, 2022

user956424

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

javascript

php

jquery

ajax

cross-domain

Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

Answers

javascript,php,jquery,ajax,cross-domain