pengembangan-web-mp-pd.com

Mengapa JavaScript saya mendapatkan header "Tidak ada tajuk 'Akses-Kontrol-Izinkan-Asal' ada pada sumber daya yang diminta" ketika Postman tidak?

Saya mencoba melakukan otorisasi menggunakan JavaScript dengan menghubungkan ke RESTfulAPI built in Flask . Namun, ketika saya mengajukan permintaan, saya mendapatkan kesalahan berikut:

XMLHttpRequest tidak dapat memuat http: // myApiUrl/login . Header 'Access-Control-Allow-Origin' tidak ada pada sumber daya yang diminta. Karena itu, 'nol' tidak diizinkan untuk diakses.

Saya tahu bahwa API atau sumber daya jarak jauh harus mengatur tajuk, tetapi mengapa itu berfungsi saat saya mengajukan permintaan melalui ekstensi Chrome Postman ?

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);
    });
2059
Mr Jedi

Jika saya memahaminya dengan benar Anda sedang melakukan XMLHttpRequest ke domain yang berbeda dengan halaman Anda. Jadi browser memblokirnya karena biasanya memungkinkan permintaan di Origin yang sama untuk alasan keamanan. Anda perlu melakukan sesuatu yang berbeda ketika Anda ingin melakukan permintaan lintas-domain. Tutorial tentang cara mencapainya adalah Menggunakan CORS.

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

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

1124

Ini bukan perbaikan untuk produksi atau ketika aplikasi harus ditunjukkan kepada klien, ini hanya membantu ketika UI dan Backend development ada di berbagai server dan dalam produksi mereka sebenarnya di server yang sama. Sebagai contoh: Saat mengembangkan UI untuk aplikasi apa pun jika ada kebutuhan untuk mengujinya secara lokal menunjuk 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 mudah adalah dengan menambahkan ekstensi di google chrome untuk memungkinkan akses menggunakan CORS.

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

Cukup aktifkan ekstensi ini setiap kali Anda ingin mengizinkan akses ke permintaan tajuk 'akses-kontrol-boleh-asal'.

Atau 

Di Windows, rekatkan perintah ini di jendela run 

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

ini akan membuka browser chrome baru yang memungkinkan akses ke permintaan tajuk 'akses-kontrol-bolehkan-Asal'.

485
shruti

Jika Anda dapat menangani JSON sebagai imbalan, kemudian coba gunakan JSONP (perhatikan P di akhir) untuk berbicara di antara domain:

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

Pelajari lebih lanjut tentang bekerja dengan JSONP di sini :

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

322
Gavin

Ini sangat mudah untuk diselesaikan jika Anda menggunakan 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 bisa dipanggil oleh penyerang. Anda harus menggunakan sesi dan cookie untuk otentikasi untuk mencegah file/layanan Anda terhadap serangan ini. Layanan Anda rentan terhadap pemalsuan permintaan lintas situs (CSRF).

Jika Anda menggunakan Node-red Anda harus mengizinkan CORS dalam file node-red/settings.js dengan menghapus komentar pada 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"
},
200
shady sherif

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

Semua yang Anda butuhkan:

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

168
yoshyosh

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 di ExpressJS

67
Nguyen Tran

Ada masalah lintas-domain menggunakan Ajax. Anda harus yakin Anda mengakses file Anda pada jalur http:// yang sama tanpa www. (atau akses dari http://www. dan memposting ke jalur yang sama termasuk www.) yang dianggap browser sebagai domain lain ketika mengakses melalui jalur www., sehingga Anda dapat melihat di mana masalahnya aku s. Anda memposting ke domain yang berbeda dan browser memblokir aliran karena masalah Asal.

Jika API tidak ditempatkan pada Host yang sama dengan yang Anda minta, alirannya diblokir, dan Anda perlu menemukan cara lain untuk berkomunikasi dengan API.

63
Alin Razvan

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

keduanya berbeda panggilan tukang pos "POST" dengan benar tetapi ketika kita menyebutnya akan "PILIHAN"

Untuk layanan web c # - webapi 

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

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

Pastikan Anda tidak melakukan kesalahan 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");
    }
});

Masalah sudut 4 silakan merujuk: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Catatan: Jika Anda mencari untuk mengunduh konten dari situs web pihak ketiga maka ini tidak akan membantu Anda. Anda dapat mencoba kode berikut tetapi bukan JavaScript.

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

Coba XDomain ,

Ringkasan: Alternatif JavaScript CORS murni/polyfill. Tidak diperlukan konfigurasi server - cukup tambahkan proxy.html pada domain yang ingin Anda komunikasikan. Pustaka ini menggunakan XHook untuk menghubungkan semua XHR , sehingga XDomain harus bekerja bersama dengan pustaka apa pun.

22
user3359786

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 memasukkan parameter Origin dengan permintaan Anda . Origin ini HARUS cocok dengan Origin yang dikirim browser Anda dengan permintaan Anda.

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

Fungsionalitas edit mengirim permintaan GET & POST ke domain lain untuk mengambil data. Saya mengatur parameter Origin yang menyelesaikan masalah . Backend adalah mesin mediaWiki.

tldr: Tambahkan parameter "Asal" ke panggilan Anda yang harus menjadi parameter Asal yang dikirim browser Anda (Anda tidak bisa menipu parameter Asal)

11
Ganesh Krishnan

Saya punya 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 tajuk Akses-Kontrol-Bolehkan-Asal.

Saya menemukan bahwa AngularJS membuat permintaan OPSI "percobaan" . ColdFusion, secara default, menghasilkan metode OPSI, tetapi tidak memiliki banyak, header ini secara khusus. Kesalahan dihasilkan sebagai respons terhadap panggilan PILIHAN itu, dan bukan pada panggilan saya yang disengaja ke GET. Setelah saya menambahkan metode OPSI di bawah ini ke API saya, masalahnya telah diselesaikan.

<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
Leonid Alzhin

Saya memiliki konfigurasi berikut, menghasilkan kesalahan yang sama, ketika meminta tanggapan dari server.

Sisi-server:SparkJava -> menyediakan REST-API
Sisi klien:ExtJs6 -> menyediakan rendering Browser 

Di sisi server saya harus menambahkan ini ke respons: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

Pada sisi klien saya harus menambahkan ini ke permintaan: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

Berdasarkan jawaban shruti , saya membuat pintasan browser Chrome dengan argumen yang diperlukan: enter image description here enter image description here

8

https://github.com/Rob--W/cors-anywhere/ memberikan (Node.js) kode yang dapat Anda gunakan untuk mengatur dan menjalankan proxy CORS Anda sendiri. Ini dipelihara secara aktif dan menyediakan sejumlah fitur untuk mengendalikan perilaku proxy yang melampaui sekadar pengiriman dasar dari header respons Access-Control-* yang benar.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS memiliki detail untuk menjelaskan bagaimana browser menangani permintaan lintas-Asal yang dibuat oleh aplikasi web sisi-klien dari JavaScript dan header apa yang Anda harus mengkonfigurasi pengiriman oleh server permintaan dibuat, jika Anda bisa.

Jika situs tempat Anda perlu membuat permintaan dan mendapat respons dari tidak mengembalikan tajuk respons Access-Control-Allow-Origin, browser selalu akan memblokir permintaan Asal-silang yang dibuat langsung oleh sisi klien Anda Kode JavaScript tidak berfungsi. Dan jika situs tersebut bukan situs yang Anda kendalikan dan dapat dikonfigurasikan untuk perilaku, satu-satunya hal yang akan berfungsi dalam hal ini adalah mem-proxy-kan permintaan — baik melalui proxy Anda sendiri yang Anda jalankan sendiri atau melalui proxy terbuka.

Seperti disebutkan dalam komentar lain di sini, ada alasan bagus untuk tidak mempercayai proxy terbuka dengan permintaan Anda. Yang mengatakan, jika Anda tahu apa yang Anda lakukan dan Anda memutuskan proxy terbuka berfungsi untuk kebutuhan Anda, https://cors-anywhere.herokuapp.com/ adalah salah satu yang dapat diandalkan, dipelihara secara aktif, dan berjalan sebuah instance dari https://github.com/Rob--W/cors-anywhere/ kode.

Seperti halnya proxy terbuka lainnya yang disebutkan di sini (beberapa di antaranya setidaknya tampaknya tidak tersedia lagi), cara kerjanya adalah bahwa alih-alih meminta kode klien Anda mengirim permintaan langsung ke, misalnya, http://foo.com Anda mengirimnya ke https://cors-anywhere.herokuapp.com/http://foo.com dan proksi menambahkan header Access-Control-* yang diperlukan ke respons yang dilihat browser.

7
sideshowbarker

Anda dapat melewati masalah dengan menggunakan YQL untuk memproksi permintaan melalui server Yahoo. Ini hanya beberapa baris kode:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Berikut tautan dengan penjelasan: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Jika Anda menggunakan Entity Framework , tampaknya kesalahan ini terkadang akan dilempar bahkan jika CORS Anda diaktifkan. Saya tahu bahwa kesalahan terjadi karena finalisasi permintaan tidak ada. Saya berharap ini akan membantu orang lain dalam situasi yang sama.

Kode berikut dapat menyebabkan kesalahan XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Untuk memperbaikinya, diperlukan panggilan finalisasi seperti .ToList() atau .FirstOrDefault() di akhir permintaan, seperti:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

Dalam kasus saya, saya menggunakan aplikasi JEE7 JAX-RS dan trik berikut ini berfungsi dengan baik untuk saya:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

Jika Anda mendapatkan pesan kesalahan ini dari browser:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

ketika Anda mencoba melakukan permintaan Ajax POST/GET ke server jauh yang di luar kendali Anda, lupakan tentang perbaikan sederhana ini:

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

Anda benar-benar membutuhkan, terutama jika Anda hanya menggunakan JavaScript untuk melakukan permintaan Ajax, proxy internal yang mengambil kueri Anda dan mengirimkannya ke server jarak jauh.

Pertama dalam kode JavaScript Anda, lakukan panggilan Ajax ke server Anda sendiri, sesuatu seperti:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Lalu, buat file PHP sederhana bernama proxy.php untuk membungkus data POST Anda dan menambahkannya ke server URL jauh sebagai parameter. Saya memberi Anda sebuah contoh bagaimana saya mengatasi masalah ini dengan API pencarian Hotel Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Dengan melakukan:

echo json_encode(file_get_contents($url));

Anda hanya melakukan permintaan yang sama, tetapi di sisi server dan setelah itu, itu akan berfungsi dengan baik.

Jawaban disalin dan disisipkan dari NizarBsb

4
Flash

Saya berhasil menyelesaikan (dalam kasus saya untuk font) menggunakan htaccess tetapi jelas, OP meminta sedikit berbeda. Tetapi Anda dapat menggunakan pola FileMatch dan menambahkan segala jenis ekstensi sehingga tidak akan memberikan kesalahan silang.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

Untuk API GoLang:

Pertama, Anda dapat melihat MDN CORS Doc untuk mengetahui apa itu CORS. Sejauh yang saya tahu, CORS adalah tentang apakah mengizinkan Origin Of Request untuk mengakses Server Resource atau tidak.

Dan Anda dapat membatasi permintaan Asal yang dapat mengakses server dengan mengatur Access-Control-Allow-Origin di Header dari Respons Server.

Misalnya, Mengatur tajuk berikut dalam Server Response berarti bahwa hanya permintaan yang dikirim dari http://foo.example yang dapat mengakses server Anda:

Access-Control-Allow-Origin: http://foo.example

dan berikut ini memungkinkan permintaan yang dikirim dari Asal (atau domain) apa pun:

Access-Control-Allow-Origin: *

Dan seperti yang saya tahu di pesan kesalahan, requested resource berarti sumber daya server, jadi No 'Access-Control-Allow-Origin' header is present on the requested resource. berarti Anda tidak mengatur header Access-Control-Allow-Origin dalam Respons Server Anda, atau mungkin Anda mengatur tetapi Asal permintaan tidak tercantum dalam Access-Control-Allow-Origin sehingga permintaan tidak diizinkan mengakses:

Header 'Access-Control-Allow-Origin' tidak ada pada sumber daya yang diminta. Karena itu, 'nol' tidak diizinkan untuk diakses.

Di GoLang, saya menggunakan paket gorilla/mux untuk membangun server API di localhost:9091, dan saya mengizinkan CORS dengan menambahkan "Access-Control-Allow-Origin", "*" ke header respons:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

Dan saya menggunakan JavaScript di klien, di localhost:9092 membuat permintaan oleh Chrome berhasil mendapatkan "OKOK" dari Server localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Selain itu Anda dapat memeriksa header permintaan/respons Anda dengan alat-alat seperti Fiddler.

4
yu yang Jian

Pertanyaan populer - Hal lain yang perlu diperhatikan jika Anda sudah membaca sejauh ini dan tidak ada yang membantu. Jika Anda memiliki CDN seperti Akamai, Limelight atau yang serupa, Anda mungkin ingin memeriksa kunci cache yang Anda miliki untuk URI sumber daya. Jika tidak termasuk nilai header Asal, Anda mungkin mengembalikan respons yang di-cache ketika diminta dari Asal lain. Kami hanya menghabiskan setengah hari men-debug ini. Konfigurasi CDN dimutakhirkan untuk hanya menyertakan nilai Asal untuk beberapa domain pilihan dan milik kami untuk null untuk yang lainnya. Ini tampaknya berfungsi dan memungkinkan peramban dari domain yang dikenal untuk melihat sumber kami. Tentu saja semua jawaban lain merupakan prasyarat untuk sampai ke sini, tetapi jika CDN adalah hop pertama dari browser Anda, ini adalah sesuatu untuk ditinjau. 

Dalam kasus kami, kami dapat melihat beberapa permintaan masuk ke layanan kami, tetapi tidak sampai pada volume yang dikirimkan situs. Itu menunjuk kami ke CDN. Kami dapat kembali dan melihat permintaan asli dilayani dari permintaan langsung, bukan bagian dari panggilan browser AJAX dan header respons Access-Control-Allow-Origin tidak dimasukkan. Rupanya CDN menyimpan nilai ini. Konfigurasi CDN Akamai Tweak untuk mempertimbangkan nilai header permintaan Asal sebagai bagian dari pertandingan tampaknya membuatnya bekerja untuk kami.

Banyak kali ini terjadi pada saya dari javascript ke php api saya, karena salah satu dari beberapa alasan. Saya lupa menaruh <?php header('Access-Control-Allow-Origin: *'); ? adalah satu. Ini bermanfaat untuk akses lintas domain. Alasan lain, adalah karena dalam permintaan ajax jQuery saya menentukan tipe data tertentu dan mengembalikan tipe data yang berbeda, sehingga melemparkan kesalahan. 

Alasan terakhir dan paling menonjol untuk kesalahan ini adalah ada kesalahan parse pada halaman yang Anda minta. Jika Anda menekan url halaman di browser Anda lebih dari kemungkinan Anda akan melihat kesalahan parse dan Anda akan memiliki nomor baris untuk mengatasi masalah tersebut. 

Saya harap ini membantu seseorang. Saya butuh beberapa saat setiap kali untuk men-debug ini dan saya berharap saya memiliki daftar hal untuk diverifikasi.

3

Dalam permintaan jsonp Anda harus menangkap "jsonpCallback" dan mengirimnya kembali.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Di sisi backend (jika Anda menggunakan PHP backend)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

Dalam hal ini respon backend sepertinya 

jQuery331009526199802841284_1533646326884 ({"ip": "192.168.1.1"})

tetapi Anda dapat mengatur "jsonpCallback" secara manual di frontend dan menangkapnya di sisi backend

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Dalam hal ini respon backend sepertinya 

get_ip ({"ip": "192.168.1.1"})

2
Alexey Kolotsey

Di situs web saya (berdasarkan .NET) Saya baru saja menambahkan ini:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Terima kasih banyak untuk ini video.

2
FrenkyB

jika Anda ingin memperbaikinya di backend (di Flask), daripada di ujung depan, saya benar-benar akan merekomendasikan paket python Flask CORS. Flask Cors

Dengan satu baris sederhana di app.py Anda, Anda dapat secara otomatis memasukkan standar yang memungkinkan header Asal, atau menyesuaikannya sesuai kebutuhan.

2
Ben Watts

Untuk kelengkapan, Apache memungkinkan kor:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS adalah untuk Anda.

CORS adalah "Berbagi Sumber Daya Silang" dan merupakan cara untuk mengirim permintaan lintas-domain. Sekarang XMLHttpRequest2 dan Fetch API keduanya mendukung CORS.

Tetapi ada batasnya. Server perlu mengklaim secara spesifik Access-Control-Allow-Origin, dan tidak dapat diatur ke '*'.

Dan jika Anda ingin Origin dapat mengirim permintaan kepada Anda, Anda perlu JSONP (juga perlu mengatur Access-Control-Allow-Origin, tetapi bisa menjadi '*').

Untuk banyak cara permintaan jika Anda tidak tahu harus memilih apa, saya pikir Anda memerlukan komponen yang berfungsi penuh untuk melakukan itu. Izinkan saya memperkenalkan komponen sederhana catta


Jika Anda menggunakan browser modern (> Internet Explorer9, Chrome, Firefox, Edge, dll.), Sangat disarankan Anda menggunakan komponen yang sederhana namun indah, https://github.com/Joker-Jelly/catta. Tidak memiliki dependensi, kurang dari 3 KB, dan mendukung Fetch, Ajax, dan JSONP dengan sintaks dan opsi mati-sederhana yang sama.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Ini juga mendukung semua cara untuk mengimpor ke proyek Anda, seperti modul ES6, CommonJS dan bahkan <script> dalam HTML.

2
Jelly

Sebagian besar jawaban ini memberi tahu pengguna cara menambahkan header CORS ke server yang mereka kontrol.

Namun, jika Anda memerlukan data dari server yang tidak Anda kontrol di halaman web, salah satu solusinya adalah membuat tag skrip pada halaman Anda, atur atribut src ke titik akhir api yang tidak memiliki header CORS, kemudian muat data itu ke halaman:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Solusi ini pasti akan bekerja untuk Anda. Tambahkan pegangan pesan khusus:

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Daftar di webapiconfig.cs:

config.MessageHandlers.Add(new CustomHeaderHandler());

Dan jika Anda menggunakan SignalR maka tambahkan kode ini dalam file globle.asax.cs:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var referrer = Request.UrlReferrer;
    if (Context.Request.Path.Contains("signalr/") && referrer != null)
    {
        Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
    }
}
2
Ujjwal

Saya mendapatkan kesalahan ini dengan $http.get di Angular. Saya harus menggunakan$http.jsonpsebagai gantinya.

2
Travis Heeter

Mungkin sedikit rumit tetapi Anda dapat menggunakan server web untuk merutekan permintaan . Dengan simpul, Anda tidak mengalami masalah ini. Saya bukan ahli dalam simpul js. Jadi saya tidak tahu apakah ini kode yang bersih. 

Tetapi ini berhasil bagi saya

Berikut ini sedikit contoh:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Untuk server Ruby on Rails di application_controller.rb, tambahkan ini:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

Tidak ada tajuk 'Akses-Kontrol-Bolehkan-Asal' hadir pada sumber daya yang diminta. Origin ' https://sx.xyz.com ' karena itu tidak diperbolehkan mengakses.

Saya juga menghadapi masalah serupa dengan Cross Domain Data Exchange dalam respons Ajax karena error tidak terdefinisi. Tetapi respons di header adalah Kode Status: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

Solusi untuk menyiasatinya: Dalam kasus saya ini adalah memanggil fungsi checkapikey () melalui Ajax ke domain lain dan mendapatkan respons dengan data ke tempat panggilan dilakukan:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

Untuk Opera (berfungsi sama dengan Chrome), saya memulai browser dengan perintah ini:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

Masalah terpecahkan! Sekarang saya dapat bekerja pada file HTML lokal (pada hard disk drive saya) dan memanggil permintaan Ajax ke asal jauh di file yang sama.

Catatan 1: Anda dapat memberikan folder apa pun di direktori home Anda sebagai --user-data-dir.

Catatan 2: Diuji pada Debian 8 (Jessie)/Opera 39

 Here is a screenshot

Ketika Anda mulai secara normal (tanpa parameter di atas), permintaan yang sama jatuh ke dalam blok kode kesalahan.

0
csonuryilmaz

Mungkin Anda dapat menyalin sumber daya dari server produksi ke server Development, dan meminta URL untuk menyesuaikan sumber daya secara dinamis. Dengan cara itu Anda akan selalu membaca dari Origin yang sama, menghilangkan pengecualian Origin cross.

0
bachstein

Dalam kasus saya, saya menggunakan Spring Boot sebagai layanan, Anda dapat menambahkan anotasi silang Asal pada operasi yang bertanggung jawab:

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // Do something
} 
0
Chandan Kumar

Saya membuat jembatan sederhana di domain saya sendiri yang mengambil dan menampilkan konten dari domain eksternal.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Sekarang, alih-alih mengakses domain eksternal di AJAX, saya menempatkan URL file jembatan ini.

Anda harus menyesuaikan Content-Type sesuai dengan kebutuhan Anda. Jika data dalam JSON maka gunakan header("Content-Type: application/json");

0
Muhammad Saqib

Hanya dengan menyebutkan cara lain "memintas" itu - AJAX proksi. Kirim permintaan ke server Anda untuk mengambil data dari Negara lain dan mengirim permintaan kembali kepada Anda.

Saya lebih suka pendekatan ini daripada JSONP karena memiliki beberapa masalah keamanan potensial.

0
carobnodrvo

Saya telah menyelesaikan ini dengan mengaktifkan CORS untuk URL klien mengakses API web, dan itu berhasil.

Sebagai contoh:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali