Asal tidak diizinkan oleh Access-Control-Allow-Origin

Saya sedang membuat Ajax.requestke server PHP jarak jauh dalam aplikasi Sencha Touch 2 (dibungkus dengan PhoneGap ).

Respons dari server adalah sebagai berikut:

XMLHttpRequest tidak dapat memuat http://nqatalog.negroesquisso.pt/login.php . Asal http://localhost:8888tidak diizinkan oleh Access-Control-Allow-Origin.

Bagaimana saya bisa memperbaiki masalah ini?

Saya menulis artikel tentang masalah ini beberapa waktu lalu, Cross Domain AJAX .

Cara termudah untuk menangani ini jika Anda memiliki kontrol server yang merespons adalah dengan menambahkan header respons untuk:

Access-Control-Allow-Origin: *

Ini akan memungkinkan lintas-domain Ajax . Di PHP, Anda ingin memodifikasi respons seperti:

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

Anda cukup meletakkan Header set Access-Control-Allow-Origin *pengaturan di konfigurasi Apache atau file htaccess.

Perlu dicatat bahwa ini secara efektif menonaktifkan perlindungan CORS, yang sangat mungkin mengekspos pengguna Anda untuk menyerang . Jika Anda tidak tahu bahwa Anda secara khusus perlu menggunakan wildcard, Anda tidak boleh menggunakannya, dan sebaliknya Anda harus memasukkan daftar putih domain spesifik Anda:

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

Jika Anda tidak memiliki kontrol dari server, Anda bisa menambahkan argumen ini untuk peluncur Chrome Anda: --disable-web-security.

Perhatikan bahwa saya tidak akan menggunakan ini untuk "surfing web" normal. Untuk referensi, lihat posting ini: Nonaktifkan kebijakan asal yang sama di Chrome .

Jika Anda menggunakan Phonegap untuk benar-benar membangun aplikasi dan memuatnya ke perangkat, ini tidak akan menjadi masalah.

Jika Anda menggunakan Apache, tambahkan saja:

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

dalam konfigurasi Anda. Ini akan menyebabkan semua tanggapan dari server web Anda dapat diakses dari situs lain mana pun di internet. Jika Anda hanya ingin mengizinkan layanan pada host Anda digunakan oleh server tertentu, Anda dapat menggantinya *dengan URL dari server asal:

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

Jika Anda memiliki aplikasi ASP.NET / ASP.NET MVC , Anda dapat memasukkan header ini melalui 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>

Ini adalah pertanyaan / jawaban pertama yang muncul untuk saya ketika mencoba memecahkan masalah yang sama menggunakan ASP.NET MVC sebagai sumber data saya. Saya menyadari ini tidak menyelesaikan pertanyaan PHP , tetapi cukup terkait untuk menjadi berharga.

Saya menggunakan ASP.NET MVC. The posting blog dari Greg Brant bekerja untuk saya. Pada akhirnya, Anda membuat atribut [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")],, yang dapat Anda tambahkan ke tindakan pengontrol.

Sebagai contoh:

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

Dan kemudian menggunakannya dengan:

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

Karena Matt Mombrea benar untuk sisi server, Anda mungkin mengalami masalah lain yaitu penolakan masuk daftar putih.

Anda harus mengkonfigurasi phonegap.plist Anda. (Saya menggunakan phonegap versi lama)

Untuk cordova, mungkin ada beberapa perubahan dalam penamaan dan direktori. Tetapi langkah-langkahnya sebagian besar harus sama.

Pertama pilih File yang mendukung> PhoneGap.plist

lalu di bawah "ExternalHosts"

Tambahkan entri, dengan nilai mungkin " http://nqatalog.negroesquisso.pt " Saya menggunakan * untuk tujuan debugging saja.

Ini mungkin berguna bagi siapa saja yang membutuhkan pengecualian untuk versi perujuk 'www' dan 'non-www':

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

Saya akan memberi Anda solusi sederhana untuk yang satu ini. Dalam kasus saya, saya tidak memiliki akses ke server. Dalam hal ini Anda dapat mengubah kebijakan keamanan di browser Google Chrome Anda untuk memungkinkan Access-Control-Allow-Origin. Ini sangat sederhana:

1. Buat pintasan browser Chrome
2. Klik kanan ikon pintasan -> Properti -> Pintasan -> Target

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

Lokasi mungkin berbeda. Sekarang buka Chrome dengan mengklik pintasan itu.

Saya sudah mengalami ini beberapa kali ketika bekerja dengan berbagai API. Seringkali perbaikan cepat adalah menambahkan "& callback =?" ke akhir sebuah string. Terkadang ampersand harus berupa kode karakter, dan terkadang "?": "? Callback =?" (lihat Penggunaan API Forecast.io dengan jQuery )

Jika Anda sedang menulis Ekstensi Chrome dan mendapatkan error ini, maka akan yakin Anda telah menambahkan URL dasar API untuk Anda manifest.json's perizinan blok , misalnya:

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

Ini karena kebijakan asal yang sama . Lihat lebih lanjut di Mozilla Developer Network atau Wikipedia .

Pada dasarnya, dalam contoh Anda, Anda hanya perlu memuat http://nqatalog.negroesquisso.pt/login.phphalaman nqatalog.negroesquisso.pt, bukan localhost.

jika Anda berada di bawah apache, tambahkan saja file .htaccess ke direktori Anda dengan konten ini:

Header set Access-Control-Allow-Origin: *

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

Header set Access-Control-Allow-Methods: *

Di Ruby on Rails , Anda bisa melakukannya di controller:

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

Anda dapat membuatnya berfungsi tanpa memodifikasi server dengan membuat broswer termasuk header Access-Control-Allow-Origin: *dalam respons HTTP OPTIONS '.

Di Chrome, gunakan ekstensi ini . Jika Anda menggunakan Mozilla, periksa jawaban ini .

Jika Anda mendapatkannya di Angular.js, maka pastikan Anda keluar dari nomor port Anda seperti ini:

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

Lihat di sini untuk info lebih lanjut.

Kami juga memiliki masalah yang sama dengan aplikasi phonegap yang diuji dalam chrome. Satu mesin windows yang kami gunakan di bawah file batch setiap hari sebelum Membuka Chrome. Ingat sebelum menjalankan ini, Anda perlu membersihkan semua instance chrome dari task manager atau Anda dapat memilih chrome untuk tidak berjalan di latar belakang.

BATCH: (gunakan cmd)

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

Di Ruby Sinatra

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

untuk semua orang atau

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

Ketika Anda menerima permintaan itu, Anda bisa

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

daripada ketika Anda harus menanggapi pergi dengan sesuatu seperti itu:

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