Error "Content-Type is not allowed by Access-Control-Allow-Headers in preflight Response"

Asked

Viewed 9,898 times

3

I’m making my api, in php, and I get the following warning

Xmlhttprequest cannot load http://vigilantescomunitarios.com/serviapp/api_gustavo/register.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight.

Follow the beginning of my php code:

<?php
header("Access-Control-Allow-Origin: *");
ini_set('display_errors', true);
error_reporting(E_ALL);

include_once("conexao.php");

$pdo = conectar();

$data = file_get_contents("php://input");
$data = json_decode($data);

$eh_profissional = $data->is_professional;

Follow my controller:

angular.module('servi.controllers', ['ngCordova'])

.controller('cadastroCtrl', ['$scope', '$stateParams', '$http', 
$cordovaSQLite', '$window', '$state', function ($scope, $stateParams, $http, 
$cordovaSQLite, $window, $state) {

$scope.email = [];

$scope.cadastrar = function(usuario){

$http.post("http://vigilantescomunitarios.com/serviapp/api_gustavo/register.php", usuario).success(function(response){
        // http://vigilantescomunitarios.com/serviapp/api/register

        })
    }

}])

Anybody know what the problem is? Thank you.

php angularjs

  • My case is different... I am accessing an external url and not local.

  • I agree with Gustavo, the error is another... Gustavo the message says that when trying to send a request with the header Content-Type (maybe an ajax) it was not released on Access-Control-Allow-Headers, I’m looking to see if you have an answer to that. PS: title reversed, I think you already have enough experience on the site to understand the usefulness of the question title to make it useful to future visitors.

  • @Gustavosevero and Guilherme, vote withdrawn.

  • @diegofm is not the same error, although being related the problem is specifically the behavior of XMLHttpRequest.setRequestHeader('Content-Type', 'valor customizado') (ajax), the 3 values accepted are application/x-www-form-urlencoded, multipart/form-data and text/plain, but JS libs like Angular and jQuery usually use application/json what is not standard.

2 answers

5


Error states that header use/customization is not allowed Content-Type in requisition (for example when Ajax requires your PHP) and that you must release using Access-Control-Allow-Headers

By Ajax the only headers you can adjust are:

  • Accept
  • Accept-Language
  • Content-Language

  • Content-Type, however this latter allows only the values:

    1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. text/plain


    In your case the $http.post (Angular.js) must be sending something like application/json, which is not one of the 3 quoted values allowed.

So in PHP you can adjust to:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");

  • Now it looks like it worked. I’m just having trouble with PDO kkk

  • @Gustavosevero good then solved right? About the PDO the problem is already another, I recommend opening a specific question ;)

0

If you don’t have access to the server to add headers:

You can use one of the extensions for Chrome (for development):

Allow-Control-Allow-Origin: *

CORS Toggle

These extensions disable Chrome security with respect to communication from different hosts and without the authorization setting in the header (as done by the header function() ).

In short this error is fixed by adding: (PHP)

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");

Or your API-consuming front end must be on the same host(IP+port) as your API.

Browser other questions tagged php angularjs

You are not signed in. Login or sign up in order to post.