Pertanyaan Mengapa JavaScript saya mendapatkan header "Tidak ada akses-Kontrol-Izinkan-Asal" ditampilkan pada kesalahan sumber daya yang diminta "ketika Postman tidak?


Saya mencoba melakukan otorisasi menggunakan JavaScript dengan menyambung ke Tenang  API built in Labu. Namun, ketika saya membuat permintaan, saya mendapatkan kesalahan berikut:

XMLHttpRequest tidak dapat memuat http: // myApiUrl / login. Tidak ada header 'Access-Control-Allow-Origin' yang ada di sumber yang diminta. Asal 'null' karena itu tidak diizinkan akses.

Saya tahu bahwa API atau sumber daya jarak jauh harus mengatur header, tetapi mengapa itu berhasil ketika saya membuat permintaan melalui ekstensi Chrome Tukang pos?

Ini adalah kode permintaan:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

1859
2017-11-17 19:29


asal


Jawaban:


Jika saya mengerti benar Anda melakukan XMLHttpRequest ke domain yang berbeda dari halaman Anda. Jadi browser memblokirnya karena biasanya memungkinkan permintaan dengan asal yang sama untuk alasan keamanan. Anda perlu melakukan sesuatu yang berbeda ketika Anda ingin melakukan permintaan lintas-domain. Sebuah tutorial tentang cara mencapainya Menggunakan CORS.

Ketika Anda menggunakan tukang pos mereka tidak dibatasi oleh kebijakan ini. Dikutip dari Cross-Origin XMLHttpRequest:

Halaman web biasa dapat menggunakan objek XMLHttpRequest untuk mengirim dan menerima data dari server jauh, tetapi mereka dibatasi oleh kebijakan asal yang sama. Ekstensi tidak begitu terbatas. Perpanjangan dapat berbicara dengan server jauh di luar asalnya, asalkan pertama kali meminta izin lintas asal.


998
2017-11-17 19:49



Ini bukan perbaikan untuk produksi atau ketika aplikasi harus ditunjukkan kepada klien, ini hanya membantu ketika UI dan Backend pengembangan  berbeda server dan dalam produksi mereka sebenarnya berada di server yang sama. Sebagai contoh: Saat mengembangkan UI untuk aplikasi apa pun jika ada kebutuhan untuk mengujinya secara lokal, arahkan ke server backend, dalam skenario itu ini adalah perbaikan yang sempurna. Untuk perbaikan produksi, header CORS harus ditambahkan ke server backend untuk memungkinkan akses lintas asal.

Cara mudahnya adalah dengan menambahkan ekstensi di google chrome untuk memungkinkan akses menggunakan CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Cukup aktifkan ekstensi ini kapan pun Anda ingin mengizinkan akses ke no 'akses-kontrol-memungkinkan-asal' permintaan header.

Atau 

Di Windows, tempelkan perintah ini di menjalankan jendela

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

ini akan membuka yang baru krom browser yang memungkinkan akses ke no 'akses-kontrol-memungkinkan-asal' permintaan header.


451
2018-03-04 06:42



Jika Anda bisa mengatasinya JSON sebagai imbalan, lalu coba gunakan JSONP (perhatikan P di bagian akhir) untuk berbicara antar domain:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Pelajari lebih lanjut tentang bekerja dengan JSONP sini:

Munculnya JSONP - yang pada dasarnya merupakan hacking lintas situs konsensual - telah membuka pintu untuk mashup konten yang kuat. Banyak situs terkemuka menyediakan layanan JSONP, memungkinkan Anda mengakses konten mereka melalui API yang telah ditentukan.


311
2018-02-22 00:42



Sangat mudah untuk dipecahkan jika Anda menggunakannya PHP. Cukup tambahkan skrip berikut di awal halaman PHP Anda yang menangani permintaan:

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

PERINGATAN: Ini berisi masalah keamanan untuk file PHP Anda yang dapat dipanggil oleh penyerang. Anda harus menggunakan sesi dan cookie untuk otentikasi untuk mencegah file / layanan Anda terhadap serangan ini. Layanan Anda rentan pemalsuan permintaan lintas situs (CSRF).

Jika Anda menggunakan Node-merah Anda harus mengizinkan CORS di node-red/settings.js file dengan tidak mengomentari baris berikut:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

186
2017-12-03 20:24



Saya berharap seseorang membagikan situs ini dengan saya sejak lama http://cors.io/ itu akan menghemat banyak waktu dibandingkan dengan membangun dan mengandalkan proxy saya sendiri. Namun, saat Anda beralih ke produksi, memiliki proxy Anda sendiri adalah yang terbaik karena Anda masih mengontrol semua aspek data Anda.

Semua yang Anda butuhkan:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


142
2017-07-21 22:08



Ada masalah lintas-domain menggunakan Ajax. Anda harus yakin Anda mengakses file Anda secara bersamaan http:// jalan tanpa www. (atau akses dari http://www. dan posting ke jalur yang sama termasuk www.) yang dianggap browser sebagai domain lain saat mengakses melalui www. jalan, sehingga Anda melihat di mana masalahnya. Anda memposting ke domain yang berbeda dan browser memblokir aliran karena masalah asal.

Jika itu API tidak ditempatkan pada host yang sama yang Anda minta, aliran diblokir, dan Anda perlu mencari cara lain untuk berkomunikasi dengan API.


61
2018-03-12 08:53



Jika Anda menggunakan Node.js, Cobalah:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Informasi lebih lanjut: CORS pada ExpressJS


55
2018-02-12 16:27



Karena
$ .ajax ({type: "POST"  - Panggilan PILIHAN 
$ .post ( - Panggilan POS 

keduanya berbeda Postman panggilan "POST" dengan benar tetapi ketika kita menyebutnya akan "OPSI"

Untuk layanan web c # - webapi 

Silakan tambahkan kode berikut di file web.config Anda di bawah tag <system.webServer>. Ini akan berhasil

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Harap pastikan Anda tidak melakukan kesalahan apa pun dalam panggilan ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Sudut 4 masalah, silakan lihat: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

catatan: Jika Anda mencari konten download dari situs web pihak ketiga kemudian ini tidak akan membantu Anda. Anda dapat mencoba kode berikut tetapi tidak JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

41
2017-12-13 13:02



Mencoba XDomain,

Ringkasan: Sebuah alternatif / polyfill JavaScript JavaScript murni. Tidak diperlukan konfigurasi server - cukup tambahkan proxy.html pada domain yang ingin Anda komunikasikan. Perpustakaan ini menggunakan XHook untuk menggaet semuanya XHR, jadi XDomain harus bekerja sama dengan pustaka apa pun.


22
2018-04-01 07:46



Jika Anda TIDAK ingin:

  1. Nonaktifkan keamanan web di Chrome
  2. Gunakan JSONP
  3. Gunakan situs pihak ketiga untuk merutekan ulang permintaan Anda

dan Anda yakin bahwa server Anda telah mengaktifkan CORS (uji CORS di sini: http://www.test-cors.org/)

Maka Anda harus meneruskan parameter asal dengan permintaan Anda. Asal ini HARUS sesuai dengan asal yang dikirimkan browser Anda dengan permintaan Anda.

Anda dapat melihatnya beraksi di sini: http://www.wikibackpacker.com/app/detail/Campgrounds/3591

Fungsi edit mengirim permintaan GET & POST ke domain yang berbeda untuk mengambil data. Saya mengatur parameter asal yang menyelesaikan masalah. Backend adalah mesin mediaWiki.

tldr: Tambahkan parameter "origin" ke panggilan Anda yang harus menjadi parameter Origin yang dikirimkan browser Anda (Anda tidak dapat melakukan spoof terhadap parameter origin)


9
2017-07-07 04:26



Saya memiliki masalah dengan ini ketika saya menggunakan AngularJS untuk mengakses API saya. Permintaan yang sama bekerja di SoapUI 5.0 dan ColdFusion. Metode GET saya sudah memiliki header Access-Control-Allow-Origin.

Saya menemukan itu AngularJS membuat permintaan OPTIONS "uji coba". ColdFusion, secara default, menghasilkan metode OPTIONS, tetapi tidak terlalu banyak, terutama header ini. Kesalahan dihasilkan sebagai respons terhadap panggilan OPTIONS tersebut, dan bukan ke panggilan saya yang disengaja untuk DAPATKAN. Setelah saya menambahkan metode OPTIONS di bawah ini ke API saya, masalahnya telah teratasi.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>

8
2018-01-29 00:06