5

Estou fazendo minha api, em php, e recebo o seguinte aviso

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 response.

Segue o início do meu código php:

<?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;

Segue meu 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

        })
    }

}])

Alguém sabe qual o problema? Obrigado.

4
  • Meu caso e diferente... Estou acessando uma url externa e não local. Commented 8/05/2017 às 19:32
  • Concordo com o Gustavo, o erro é outro... Gustavo a mensagem diz que ao tentar enviar uma requisição com o header Content-Type (talvez um ajax) ele não foi liberado no Access-Control-Allow-Headers, estou procurando ver se tem um resposta sobre isto. PS: titulo revertido, acho que vc já tem experiencia o suficiente no site para entender a utilidade do titulo da pergunta para torna-la proveitosa a futuros visitantes.
    – Syzoth
    Commented 8/05/2017 às 19:33
  • @GustavoSevero e Guilherme, voto retirado.
    – Marconi
    Commented 8/05/2017 às 20:05
  • @diegofm não é o mesmo erro, apesar de estar relacionado o problema é especificamente o comportamento do XMLHttpRequest.setRequestHeader('Content-Type', 'valor customizado') (ajax), os 3 valores aceitos são application/x-www-form-urlencoded, multipart/form-data e text/plain, mas libs JS como Angular e jQuery geralmente usam application/json o que não é padrão.
    – Syzoth
    Commented 8/05/2017 às 21:33

2 Respostas 2

8

O erro fala que não foi permitido o uso/customização do header Content-Type na requisição (por exemplo quando o Ajax requisita teu PHP) e que deve liberar usando Access-Control-Allow-Headers

Pelo Ajax os únicos headers que você pode ajustar são:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type, no entanto este ultimo permite apenas os valores:

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


    No seu caso o $http.post (Angular.js) deve estar enviando algo como application/json, o que não é um dos 3 valores citados permitidos.

Então no PHP pode ajustar para:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");
2
  • Agora parece que deu certo. Só estou tendo problemas com o PDO kkkkk Commented 8/05/2017 às 19:45
  • @GustavoSevero que bom então resolvido né? Sobre o PDO o problema já é outro, recomendo abrir um pergunta especifica ;)
    – Syzoth
    Commented 8/05/2017 às 19:48
0

Caso você não tenha acesso ao servidor para adicionar os cabeçalhos:

Pode usar uma das extensões para o chrome (para desenvolvimento):

Allow-Control-Allow-Origin: *

CORS Toggle

Estas extensões desabilitam a segurança do chrome com relação a comunicação de hosts diferentes e sem a definição de autorização no cabeçalho (como feita pela função header() ).

Resumindo este erro é corrigido adicionando: (PHP)

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

Ou seu front-end que consome a API deve estar no mesmo host(IP + porta) da sua API.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .