6

Eu tenho lido sobre este método json e eu simplesmente não entendo e não sei o que consertar, estou usando outro domínio para pegar o json.

Aqui está o meu código:

$(function(){
    var url = "http://website.com/json.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {
            var id = field.id;
            var title = field.title;
            $(".class").append("<a href='page.html?id=" + id + "&title=" + title +");
        });
    });
});

Erro:

XMLHttpRequest cannot load http://website.com/json.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Como posso passar isso para outro código, tipo esse:

 $.ajax({
        url: url,
        crossDomain: true,
        data: form,
        dataType: 'json',
        success: function(data) {
            console.log(data);
        },
        type: 'POST'
    });

Json.php:

<?php
    header("Access-Control-Allow-Origin: *");
    include "db.php";
    $data=array();
    $q=mysqli_query($con,"select * from `course_details`");
    while ($row=mysqli_fetch_object($q)){
        $data[]=$row;
    }
echo json_encode($data);
?>

Db.php

<?php
    header("Access-Control-Allow-Origin: *");
    $con = mysqli_connect("localhost","user","pass","db") or die ("could not connect database");
?>

Estou abrindo a index.html pelo chrome mesmo, sem ser pelo localhost, e estou fazendo a chama em outro domínio (website.com/json.php), e está com esse problema.

Um pessoal colocou como duplicada., mas não é duplicada, gostaria de uma solução que na outra não tem, preciso tem uma responda clara.

4
  • Anderson, nessa ai não tem o append junto.
    – user81560
    Commented 11/09/2017 às 17:06
  • Já tentou adicionar o header('Access-Control-Allow-Origin: *'); em website.com/json.php ? Commented 11/09/2017 às 17:57
  • Já tentei sim Julio, já tentei colocar extensão do Chrome também, não deu certo.
    – user81560
    Commented 11/09/2017 às 18:07
  • Já entrei em tudo que é site, não acho algo que ajude resolver :/
    – user81560
    Commented 11/09/2017 às 18:17

2 Respostas 2

5

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");
echo json_encode($data);

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

1
  • No header não funciona, useu a extensão o erro saiu, mas não apareceu nada, no console apareceu isso: jquery.js:4 XHR finished loading: GET "website.com/json.php". send @ jquery.js:4 ajax @ jquery.js:4 n.(anonymous function) @ jquery.js:4 getJSON @ jquery.js:4 (anonymous) @ index.html:203 j @ jquery.js:2 fireWith @ jquery.js:2 ready @ jquery.js:2 I @ jquery.js:2 se eu trocar e colocar usando o servidor localhost e abrindo o arquivo index.html direito funciona normal, quando é em outro servidor da esses erros, eu tinha usado um servidor com https e funcionou, mais já expirou.
    – user81560
    Commented 11/09/2017 às 22:57
0

Tudo indica que seja um problema de comunicação com o servidor do seu site. Isso ocorre quando você tenta fazer uma chamada para um servidor que está num domínio diferente da origem da sua requisição. Não sei qual tecnologia você está utilizando no seu site, mas é possível habilitar essa comunicação.

Pesquise sobre como habilitar CORS na tecnologia que você está utilizando no sei site.

8
  • Como posso habilitar essa comunicação?
    – user81560
    Commented 11/09/2017 às 17:03
  • Pode fazer isso seguindo esse tutorial: enable-cors.org/server_php.html Commented 11/09/2017 às 17:59
  • estou usando html porque é phonegap.
    – user81560
    Commented 11/09/2017 às 18:10
  • Tenta uma forma diferente de fazer a chamada: $.ajax({ url: 'http://website.com/json.php', dataType: 'json', crossDomain: true, success: function (data) { console.log(data) } }); Commented 11/09/2017 às 20:21
  • Já tentei também, sem sucesso.
    – user81560
    Commented 11/09/2017 às 20:53