L'origine n'est pas autorisée par Access-Control-Allow-Origin

Je crée un Ajax.requestserveur PHP distant dans une application Sencha Touch 2 (enveloppée dans PhoneGap ).

La réponse du serveur est la suivante:

XMLHttpRequest ne peut pas charger http://nqatalog.negroesquisso.pt/login.php . L'origine http://localhost:8888n'est pas autorisée par Access-Control-Allow-Origin.

Comment puis-je résoudre ce problème?

J'ai écrit un article sur cette question il y a quelque temps, Cross Domain AJAX .

La façon la plus simple de gérer cela si vous avez le contrôle du serveur répondant est d'ajouter un en-tête de réponse pour:

Access-Control-Allow-Origin: *

Cela permettra Ajax inter-domaine . En PHP, vous voudrez modifier la réponse comme ceci:

<?php header('Access-Control-Allow-Origin: *'); ?>

Vous pouvez simplement mettre le Header set Access-Control-Allow-Origin *paramètre dans la configuration Apache ou le fichier htaccess.

Il convient de noter que cela désactive efficacement la protection CORS, ce qui expose très probablement vos utilisateurs aux attaques . Si vous ne savez pas que vous devez spécifiquement utiliser un caractère générique, vous ne devez pas l'utiliser, et vous devez plutôt mettre votre domaine spécifique en liste blanche:

<?php header('Access-Control-Allow-Origin: http://example.com') ?>

Si vous n'avez le contrôle du serveur, vous pouvez simplement ajouter cet argument à votre lanceur d'applications Chrome: .--disable-web-security

Notez que je ne l'utiliserais pas pour une "navigation sur le Web" normale. Pour référence, consultez cet article: désactiver la même politique d'origine dans Chrome .

Celui que vous utilisez Phonegap pour réellement créer l'application et la charger sur l'appareil, ce ne sera pas un problème.

Si vous utilisez Apache, ajoutez simplement:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

dans votre configuration. Ainsi, toutes les réponses de votre serveur Web seront accessibles à partir de tout autre site Internet. Si vous avez l'intention d'autoriser uniquement l'utilisation des services de votre hôte par un serveur spécifique, vous pouvez remplacer le *par l'URL du serveur d'origine:

Header set Access-Control-Allow-Origin: http://my.origin.host

Si vous avez une application ASP.NET / ASP.NET MVC , vous pouvez inclure cet en-tête via le fichier Web.config:

<system.webServer>
  ...

    <httpProtocol>
        <customHeaders>
            <!-- Enable Cross Domain AJAX calls -->
            <remove name="Access-Control-Allow-Origin" />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Ce fut la première question / réponse qui est apparue pour moi lorsque j'essayais de résoudre le même problème en utilisant ASP.NET MVC comme source de mes données. Je me rends compte que cela ne résout pas la question PHP , mais il est suffisamment lié pour être utile.

J'utilise ASP.NET MVC. Le billet de blog de Greg Brant a fonctionné pour moi. En fin de compte, vous créez un attribut, [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]que vous pouvez ajouter aux actions du contrôleur.

Par exemple:

public class HttpHeaderAttribute : ActionFilterAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }
    public HttpHeaderAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        filterContext.HttpContext.Response.AppendHeader(Name, Value);
        base.OnResultExecuted(filterContext);
    }
}

Et puis l'utiliser avec:

[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]
public ActionResult MyVeryAvailableAction(string id)
{
    return Json( "Some public result" );
}

Comme Matt Mombrea est correct pour le côté serveur, vous pourriez rencontrer un autre problème qui est le rejet de la liste blanche.

Vous devez configurer votre phonegap.plist. (J'utilise une ancienne version de phonegap)

Pour cordova, il pourrait y avoir quelques changements dans le nom et le répertoire. Mais les étapes doivent être essentiellement les mêmes.

Sélectionnez d'abord Fichiers de support> PhoneGap.plist

puis sous "ExternalHosts"

Ajoutez une entrée, avec une valeur de peut-être " http://nqatalog.negroesquisso.pt " J'utilise * à des fins de débogage uniquement.

Cela peut être pratique pour quiconque a besoin d'une exception pour les versions "www" et "non www" d'un référent:

 $referrer = $_SERVER['HTTP_REFERER'];
 $parts = parse_url($referrer);
 $domain = $parts['host'];

 if($domain == 'google.com')
 {
         header('Access-Control-Allow-Origin: http://google.com');
 }
 else if($domain == 'www.google.com')
 {
         header('Access-Control-Allow-Origin: http://www.google.com');
 }

Je vais vous donner une solution simple pour celle-ci. Dans mon cas, je n'ai pas accès à un serveur. Dans ce cas, vous pouvez modifier la politique de sécurité de votre navigateur Google Chrome pour autoriser Access-Control-Allow-Origin. C'est très simple:

1. Créer un raccourci de navigateur Chrome
2. Cliquez avec le bouton droit sur l'icône de raccourci -> Propriétés -> Raccourci -> Cible

Coller simplement "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security.

L'emplacement peut différer. Ouvrez maintenant Chrome en cliquant sur ce raccourci.

J'ai rencontré cela plusieurs fois en travaillant avec diverses API. Souvent, une solution rapide consiste à ajouter "& callback =?" à la fin d'une chaîne. Parfois l'esperluette doit être un code de caractère, et parfois un "?": "? Callback =?" (voir Utilisation de l'API Forecast.io avec jQuery )

Si vous écrivez une extension Chrome et obtenir cette erreur, alors assurez - vous que vous avez ajouté l'URL de base de l'API à votre manifest.jsonde bloc d'autorisations , par exemple:

"permissions": [
    "https://itunes.apple.com/"
]

Cela est dû à la politique de même origine . Voir plus sur Mozilla Developer Network ou Wikipedia .

Fondamentalement, dans votre exemple, vous devez http://nqatalog.negroesquisso.pt/login.phpuniquement charger la page à partir de nqatalog.negroesquisso.pt, pas localhost.

si vous êtes sous apache, ajoutez simplement un fichier .htaccess à votre répertoire avec ce contenu:

Header set Access-Control-Allow-Origin: *

Header set Access-Control-Allow-Headers: content-type

Header set Access-Control-Allow-Methods: *

Dans Ruby on Rails , vous pouvez faire dans un contrôleur:

headers['Access-Control-Allow-Origin'] = '*'

Vous pouvez le faire fonctionner sans modifier le serveur en créant le navigateur en incluant l'en-tête Access-Control-Allow-Origin: *dans les réponses des OPTIONS HTTP.

Dans Chrome, utilisez cette extension . Si vous êtes sur Mozilla, vérifiez cette réponse .

Si vous obtenez ceci dans Angular.js, alors assurez-vous d'échapper votre numéro de port comme ceci:

var Project = $resource(
    'http://localhost\\:5648/api/...', {'a':'b'}, {
        update: { method: 'PUT' }
    }
);

Voir ici pour plus d'informations à ce sujet.

Nous avons également le même problème avec l'application phonegap testée en chrome. Une machine Windows que nous utilisons tous les jours sous le fichier de commandes avant d'ouvrir Chrome. Rappelez-vous qu'avant d'exécuter cela, vous devez nettoyer toutes les instances de chrome du gestionnaire de tâches ou vous pouvez sélectionner chrome pour ne pas l'exécuter en arrière-plan.

LOT: (utilisez cmd)

cd D:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security

Dans Ruby Sinatra

response['Access-Control-Allow-Origin'] = '*' 

pour tout le monde ou

response['Access-Control-Allow-Origin'] = 'http://yourdomain.name' 

Lorsque vous recevez la demande, vous pouvez

var origin = (req.headers.origin || "*");

que lorsque vous devez répondre, allez avec quelque chose comme ça:

res.writeHead(
    206,
    {
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': origin,
    }
);