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:

		var username = $('#uname').val();
		var password = $('#pass').val();
		var result = $('.result');

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

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

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

	if (!isset($_SERVER['HTTP_ORIGIN'])) {
		echo "This is not cross-domain request";
	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'";

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




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

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

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

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

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

Usual scenario looks like this:

  1. Client send ajax request to server
  2. Your server forwards request to external/remote server
  3. Waiting on response from remote server
  4. Parse and process response from remote server
  5. 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

Friday, November 25, 2022

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, 

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
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 :