Origin non è consentito da Access-Control-Allow-Origin

Sto realizzando un Ajax.requestserver PHP remoto in un'applicazione Sencha Touch 2 ( inclusa in PhoneGap ).

La risposta dal server è la seguente:

XMLHttpRequest non può caricare http://nqatalog.negroesquisso.pt/login.php . Origin http://localhost:8888non è consentito da Access-Control-Allow-Origin.

Come posso risolvere questo problema?

Ho scritto un articolo su questo problema qualche tempo fa, Cross Domain AJAX .

Il modo più semplice per gestirlo se si ha il controllo del server di risposta è aggiungere un'intestazione di risposta per:

Access-Control-Allow-Origin: *

Ciò consentirà Ajax tra domini . In PHP, ti consigliamo di modificare la risposta in questo modo:

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

Puoi semplicemente mettere l' Header set Access-Control-Allow-Origin *impostazione nella configurazione di Apache o nel file htaccess.

Va notato che questo disabilita efficacemente la protezione CORS, che molto probabilmente espone gli utenti all'attacco . Se non sai che devi specificamente utilizzare un carattere jolly, non dovresti usarlo e invece dovresti inserire nella whitelist il tuo dominio specifico:

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

Se non si ha il controllo del server, si può semplicemente aggiungere questo argomento per il vostro programma di avvio Chrome: --disable-web-security.

Nota che non lo userei per la normale "navigazione sul web". Per riferimento, vedi questo post: disabilita la stessa politica di origine in Chrome .

Uno che usi Phonegap per creare effettivamente l'applicazione e caricarla sul dispositivo, non sarà un problema.

Se stai usando Apache basta aggiungere:

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

nella tua configurazione. Ciò farà sì che tutte le risposte del tuo server web siano accessibili da qualsiasi altro sito su Internet. Se si intende consentire l'utilizzo dei servizi sul proprio host da parte di un server specifico, è possibile sostituirlo *con l'URL del server di origine:

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

Se si dispone di un'applicazione ASP.NET / ASP.NET MVC , è possibile includere questa intestazione tramite il file 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>

Questa è stata la prima domanda / risposta che è emersa per me quando ho cercato di risolvere lo stesso problema utilizzando ASP.NET MVC come fonte dei miei dati. Mi rendo conto che questo non risolve la domanda PHP , ma è abbastanza correlato per essere prezioso.

Sto usando ASP.NET MVC. Il post sul blog di Greg Brant ha funzionato per me. Alla fine, crei un attributo [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]che puoi aggiungere alle azioni del controller.

Per esempio:

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);
    }
}

E poi usandolo con:

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

Poiché Matt Mombrea è corretto per il lato server, potresti riscontrare un altro problema che è il rifiuto della whitelisting.

Devi configurare il tuo phonegap.plist. (Sto usando una vecchia versione di phonegap)

Per cordova, potrebbero esserci delle modifiche nella denominazione e nella directory. Ma i passaggi dovrebbero essere per lo più gli stessi.

Prima seleziona File di supporto> PhoneGap.plist

quindi in "ExternalHosts"

Aggiungi una voce, con un valore forse " http://nqatalog.negroesquisso.pt " Sto usando * solo a scopo di debug.

Questo potrebbe essere utile per chiunque abbia bisogno di un'eccezione per entrambe le versioni "www" e "non www" di un referrer:

 $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');
 }

Ti darò una soluzione semplice per questo. Nel mio caso non ho accesso a un server. In tal caso è possibile modificare la politica di sicurezza nel browser Google Chrome per consentire Access-Control-Allow-Origin. Questo è molto semplice:

1. Crea un collegamento al browser Chrome
2. Icona scorciatoia tasto destro del mouse -> Proprietà -> Collegamento -> Destinazione

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

La posizione potrebbe essere diversa. Ora apri Chrome facendo clic su quel collegamento.

Mi sono imbattuto in questo alcune volte quando lavoro con varie API. Spesso una soluzione rapida è aggiungere "& callback =?" alla fine di una stringa. A volte la e commerciale deve essere un codice carattere, a volte un "?": "? Callback =?" (vedi Utilizzo dell'API Forecast.io con jQuery )

Se si scrive un'estensione Chrome e ottenere questo errore, quindi assicuratevi di aver aggiunto URL di base della API per la tua manifest.jsons' le autorizzazioni di blocco , ad esempio:

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

Ciò è dovuto alla politica della stessa origine . Scopri di più su Mozilla Developer Network o Wikipedia .

Fondamentalmente, nel tuo esempio, devi caricare la http://nqatalog.negroesquisso.pt/login.phppagina solo da nqatalog.negroesquisso.pt, non localhost.

se sei sotto apache, aggiungi un file .htaccess alla tua directory con questo contenuto:

Header set Access-Control-Allow-Origin: *

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

Header set Access-Control-Allow-Methods: *

In Ruby on Rails , puoi fare in un controller:

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

Puoi farlo funzionare senza modificare il server facendo in modo che il broswer includa l'intestazione Access-Control-Allow-Origin: *nelle risposte delle OPZIONI HTTP.

In Chrome, usa questa estensione . Se sei su Mozilla, controlla questa risposta .

Se lo ottieni in Angular.js, assicurati di sfuggire al tuo numero di porta in questo modo:

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

Vedi qui per maggiori informazioni.

Abbiamo anche lo stesso problema con l'applicazione phonegap testata in Chrome. Un computer Windows che utilizziamo sotto il file batch ogni giorno prima di aprire Chrome. Ricorda che prima di eseguire questa operazione devi pulire tutte le istanze di Chrome dal Task Manager oppure puoi selezionare Chrome per non eseguire in background.

LOTTO: (usa cmd)

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

In Ruby Sinatra

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

per tutti o

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

Quando ricevi la richiesta puoi

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

rispetto a quando devi rispondere vai con qualcosa del genere:

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