Aktifkan Berbagi Sumber Daya Lintas Asal

Diterbitkan: 2016-11-07

Apa itu Cross-Origin Resource Sharing (CORS) –

Berbagi sumber daya lintas-asal adalah hal mendasar yang dapat membuat sumber daya yang tersembunyi dapat terlihat. Cross-Origin Resource Sharing (CORS) adalah spesifikasi yang memungkinkan akses yang benar-benar terbuka melintasi batas domain. CORS memungkinkan skrip web untuk berinteraksi lebih terbuka dengan konten di luar domain asli, yang mengarah ke integrasi yang lebih baik antara layanan web. Berbagi sumber daya lintas-asal memungkinkan sumber daya yang diblokir seperti – font, pada halaman web untuk diminta dari domain lain di luar domain asal sumber daya.

CORS mendefinisikan cara di mana browser dan server dapat berinteraksi untuk menentukan apakah aman untuk mengizinkan permintaan lintas-asal atau tidak. Ini memungkinkan lebih banyak kebebasan dan fungsionalitas daripada permintaan asal yang sama tetapi lebih aman daripada sekadar mengizinkan semua permintaan lintas-asal.

Mengapa CORS penting?

JavaScript dan pemrograman web telah berkembang pesat selama bertahun-tahun, tetapi kebijakan asal yang sama masih tetap ada. Ini mencegah JavaScript membuat permintaan melintasi batas domain dan telah melahirkan berbagai peretasan untuk membuat permintaan lintas domain.

CORS memperkenalkan mekanisme standar yang dapat digunakan oleh semua browser untuk mengimplementasikan permintaan lintas domain. Spec mendefinisikan satu set header yang memungkinkan browser dan server untuk berkomunikasi tentang permintaan yang (dan tidak) diperbolehkan. CORS melanjutkan semangat web terbuka dengan menghadirkan akses API ke semua orang.

Aktifkan Berbagi Sumber Daya Lintas Asal –

1. CORS di Apache

Untuk menambahkan otorisasi CORS ke header menggunakan Apache, cukup tambahkan baris berikut di dalam bagian <Directory> , <Location> <Files> atau <VirtualHost> dari konfigurasi server Anda (biasanya terletak di file *.conf, seperti httpd.conf atau apache.conf), atau dalam file .htaccess :

 Set header Access-Control-Allow-Origin "*"

Untuk memastikan bahwa perubahan Anda benar, sangat disarankan agar Anda menggunakan

 apachectl -t

untuk memeriksa perubahan konfigurasi Anda untuk kesalahan. Setelah ini berlalu, Anda mungkin perlu memuat ulang Apache untuk memastikan perubahan Anda diterapkan dengan menjalankan perintah

 sudo service apache2 reload

atau

 apachectl -k anggun

Mengubah header membutuhkan penggunaan mod_headers. Mod_headers diaktifkan secara default di Apache, namun, Anda mungkin ingin memastikannya diaktifkan dengan menjalankan

 header a2enmod

Catatan : Anda juga dapat menggunakan add daripada set , tetapi perlu diketahui bahwa add dapat menambahkan header beberapa kali, jadi kemungkinan lebih aman menggunakan set.

2. CORS di App Engine

Untuk aplikasi berbasis Python di Google App Engine, metode self.response.headers.add_header() dapat digunakan, seperti:

 kelas CORSEnabledHandler(webapp.RequestHandler):
  def mendapatkan (diri):
    self.response.headers.add_header("Access-Control-Allow-Origin", "*")
    self.response.headers['Content-Type'] = 'text/csv'
    self.response.out.write(self.dump_csv())

Untuk aplikasi berbasis Java, gunakan resp.addHeader() :

 public void doGet(HttpServletRequest req, HttpServletResponse resp) {
  resp.addHeader("Access-Control-Allow-Origin", "*");
  resp.addHeader("Tipe-Konten", "teks/csv");
  resp.getWriter().append(csvString);
}

Dan untuk aplikasi berbasis Go, gunakan w.Header().Add() :

 func doGet(dengan http.ResponseWriter, r *http.Request) {
  w.Header().Add("Access-Control-Allow-Origin", "*")
  w.Header().Add("Tipe-Konten", "teks/csv")
  fmt.Fprintf(w, csvData)
}

3. CORS di ASP.NET

Jika Anda tidak memiliki akses untuk mengonfigurasi IIS, Anda masih dapat menambahkan header melalui ASP.NET dengan menambahkan baris berikut ke halaman sumber Anda:

 Response.AppendHeader("Access-Control-Allow-Origin", "*");

API Web ASP.NET

ASP.NET Web API 2 mendukung CORS.

Untuk mengaktifkan dukungan CORS, tambahkan paket Microsoft.AspNet.WebApi.Cors NuGet ke proyek Anda.

Tambahkan kode ini ke konfigurasi Anda:

 Daftar kekosongan statis publik (konfigurasi HttpConfiguration)
{
    // kode baru
    config.EnableCors();
}

Untuk mengaktifkan permintaan lintas asal, tambahkan atribut [EnableCors] ke pengontrol atau pengontrol API Web Anda:

 [EnableCors(asal: "http://example.com", header: "*", metode: "*")]
TestController kelas publik : ApiController
{
    // Metode pengontrol tidak ditampilkan...
}

Mengaktifkan Secara Global

Metode yang dijelaskan di atas juga dapat digunakan untuk mengaktifkan CORS di seluruh API tanpa memberi anotasi pada setiap pengontrol:

 Daftar kekosongan statis publik (konfigurasi HttpConfiguration)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

4. CORS di AWS API Gateway

Amazon API Gateway menambahkan dukungan untuk mengaktifkan CORS melalui tombol sederhana di konsol API Gateway. Sayangnya, tombol itu memiliki perilaku parsial, sehingga menyetel CORS dengan benar hanya untuk 200 jawaban (jadi bukan kode status HTTP lainnya) dan mengabaikan dukungan header Jquery. Solusi terbaik yang dipertimbangkan sejauh ini adalah menghindari penggunaan tombol CORS dan mengatur konfigurasi secara manual.

Ini dapat dicapai dalam beberapa langkah:

1. Masuk ke konsol API Gateway

2. Buat semua sumber daya REST yang perlu diekspos dengan metodenya sebelum menyiapkan CORS (jika sumber daya/metode baru dibuat setelah mengaktifkan CORS, langkah-langkah ini harus diulang)

3. Pilih sumber daya

4. Tambahkan metode OPTIONS, pilih sebagai tipe integrasi "mock"

5. Untuk setiap Metode sumber daya

6. Pergi ke Metode Respon

7. Tambahkan semua metode respons yang harus didukung (yaitu 200, 500, dll.)

8. Untuk setiap kode respons, atur Header Respons ke
X-Diminta-Dengan
Akses-Kontrol-Izinkan-Header
Akses-Kontrol-Izinkan-Asal
Akses-Kontrol-Izinkan-Metode

9. Masuk ke Integration Response, pilih salah satu kode respon yang dibuat, lalu Header Mappings

10. Masukkan nilai default untuk header
contoh:
X-Diminta-Dengan: '*'
Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-API-Key,x-requested-with'
Akses-Kontrol-Izinkan-Asal: '*'
Access-Control-Allow-Methods: 'POST,GET,OPTIONS'
Operasi ini harus diulang untuk setiap metode, termasuk OPSI yang baru dibuat

11. Deploy API ke stage

12. Periksa menggunakan http://client.cors-api.appspot.com/client bahwa permintaan CORS telah berhasil diaktifkan

5. CORS di Caddyserver

Untuk menambahkan otorisasi CORS ke header menggunakan Caddy, cukup tambahkan baris berikut di dalam caddyfile Anda:

 kors

Ini akan memungkinkan semua sumber daya dapat diakses dari setiap domain.

Anda juga bisa lebih spesifik, yaitu mengizinkan sumber daya tertentu ke domain tertentu:

 cors /foo http://mysite.com http://anothertrustedsite.com

Ada banyak lagi opsi yang dapat Anda gunakan, berikut adalah contoh lengkapnya, seperti yang ditunjukkan pada dokumen caddyserver:

 kor / {
  asal http://allowedSite.com
  asal http://anotherSite.org https://anotherSite.org
  metode POST,PUT
  allow_credentials salah
  max_age 3600
  allow_headers X-Custom-Header, X-Foobar
  terkena_headers X-Sesuatu-Spesial,SesuatuElse
}

6. CORS dalam Skrip CGI

Keluarkan saja barisnya:

 Akses-Kontrol-Izinkan-Asal: *

.. sebagai bagian dari header skrip CGI Anda, misalnya, di Perl (menggunakan CGI.pm):

 cetak tajuk (
  -type => 'teks/kura-kura',
  -content_location => 'datasaya.ttl',
  -access_control_allow_origin => '*',
);

7. CORS dalam skrip Perl PSGI

Modul Plack::Middleware::CrossOrigin menyediakan implementasi sisi server CORS yang lengkap. Untuk mengizinkan permintaan apa pun dari lokasi mana pun, cukup tambahkan ini ke pembuat Anda:

 aktifkan 'CrossOrigin', asal => '*';

8. CORS dengan Python

 print "Jenis Konten: teks/kura-kura"
print "Lokasi-Konten: mydata.ttl"
print "Access-Control-Allow-Origin: *"

9. CORS di ExpressJS

Di aplikasi ExpressJS Anda di node.js, lakukan hal berikut dengan rute Anda:

 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");
  Selanjutnya();
});

app.get('/', function(req, res, selanjutnya) {
  // Tangani get untuk rute ini
});

app.post('/', function(req, res, selanjutnya) {
 // Tangani pos untuk rute ini
});

10. CORS di IIS6

Untuk mengaktifkan Microsoft IIS6 CORS, lakukan langkah-langkah berikut:

  1. Buka Manajer Layanan Informasi Internet (IIS)
  2. Klik kanan situs tempat Anda ingin mengaktifkan CORS dan pergi ke Properties
  3. Ubah ke tab Header HTTP
  4. Di bagian tajuk HTTP Kustom , klik Tambah
  5. Masukkan Access-Control-Allow-Origin sebagai nama header
  6. Masukkan * sebagai nilai header
  7. Klik Oke dua kali

11. CORS di IIS7

Untuk Microsoft IIS7, gabungkan ini ke file web.config di akar aplikasi atau situs Anda:

 <?xml version="1.0" encoding="utf-8"?>
<konfigurasi>
 <system.webServer>
   <httpProtokol>
     <customHeader>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeader>
   </httpProtokol>
 </system.webServer>
</konfigurasi>

Jika Anda belum memiliki file web.config , atau tidak tahu apa itu, buat saja file baru bernama web.config yang berisi cuplikan di atas.

12. CORS di Meteor

Untuk menambahkan otorisasi CORS ke aplikasi Meteor, gunakan WebApp.connectHandlers paket webapp untuk menyesuaikan header HTTP.

 // Dengarkan permintaan HTTP yang masuk, hanya dapat digunakan di server
WebApp.rawConnectHandlers.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  kembali berikutnya();
});

Gunakan argumen path opsional untuk hanya memanggil pawang untuk jalur yang cocok dengan string yang ditentukan.

 // Dengarkan permintaan HTTP yang masuk, hanya dapat digunakan di server
WebApp.rawConnectHandlers.use("/public", function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  kembali berikutnya();
});

13. CORS di Nginx

Konfigurasi Nginx berikut mengaktifkan CORS, dengan dukungan untuk permintaan preflight.

 #
# Konfigurasi CORS terbuka lebar untuk nginx
#
lokasi / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Header dan header khusus berbagai browser *harus* boleh digunakan tetapi tidak
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified- Since,Cache-Control,Content-Type';
        #
        # Beri tahu klien bahwa info pra-penerbangan ini berlaku selama 20 hari
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Panjang Konten' 0;
        kembali 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified- Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified- Since,Cache-Control,Content-Type';
     }
}

14. CORS dalam skrip Perl PSGI

Modul Plack::Middleware::CrossOrigin menyediakan implementasi sisi server CORS yang lengkap. Untuk mengizinkan permintaan apa pun dari lokasi mana pun, cukup tambahkan ini ke pembuat Anda:

 aktifkan 'CrossOrigin', asal => '*';

Modul ini juga tersedia di Debian dan Ubuntu sebagai libplack-middleware-crossorigin-perl.

15. CORS di PHP

Jika Anda tidak memiliki akses untuk mengonfigurasi Apache, Anda masih dapat mengirim header dari skrip PHP. Ini adalah kasus menambahkan berikut ini ke skrip PHP Anda:

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

Catatan: seperti semua penggunaan fungsi header PHP, ini harus dilakukan sebelum output apa pun dikirim dari server.

16. CORS di ColdFusion

Jika Anda tidak memiliki akses untuk mengkonfigurasi server web Anda, Anda masih dapat mengirim header dari skrip Coldfusion. Ini adalah kasus menambahkan berikut ini ke skrip Coldfusion Anda:

File Berbasis Tag

 <cfheader name="Access-Control-Allow-Origin" value="*">

File Berbasis Skrip

 var respon = getPageContext().getResponse();
response.setHeader("Access-Control-Allow-Origin","*");

Catatan: Ini perlu diatur sebelum output apa pun dikirim dari server.

17. CORS di Tomcat

Apache Tomcat menyertakan dukungan untuk CORS (Mulai dari Tomcat versi 7.0.41).

Berikut adalah contoh dari dokumen yang menunjukkan konfigurasi CORS minimal:

 <filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<pemetaan filter>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-pemetaan>

18. CORS di Virtuoso

Pengaturan tingkat instance/server ini memerlukan OpenLink Virtuoso Open Source (VOS) 6.1.3 atau yang lebih baru, atau Virtuoso Commercial Edition 06.02.3129

  1. Dalam Konduktor Virtuoso , buka Server Aplikasi Web → Domain & Direktori Virtual .
  2. Perluas toko Antarmuka default.
  3. Klik Direktori Baru .
  4. Tentukan Jenis Direktori Virtual yang diinginkan , atau pilih direktori virtual yang ada untuk digunakan sebagai template.
  5. Klik Berikutnya .
  6. Tentukan nilai Jalur Direktori .
  7. Setel opsi CORS .
    • Berbagi Sumber Daya Lintas Asal – berisi satu tanda bintang pengganti, yaitu * atau asal, seperti http://example.com:8080 atau http://foo.example.com . Skrip diotorisasi untuk mengambil sumber daya jika sumber daya tersebut menggunakan wildcard atau mencantumkan asal skrip. Untuk contoh ini, masukkan URI tunggal berikut: http://demo.openlinksw.com
    • Kotak centang Tolak CORS yang Tidak Diinginkan – ketika dicentang dan aplikasi tidak menimpa header, Origins yang tidak cocok akan ditolak dengan mengirimkan respons kosong.
  8. Klik Simpan perubahan .

Untuk versi Virtuoso yang lebih lama, salah satu instruksi tingkat Aplikasi Web di bawah ini dapat digunakan. Setiap aplikasi berbasis Virtuoso dapat mengimplementasikan pemeriksaan CORS melalui fungsi HTTP terkenal http_request_header() dan http_header(), misalnya:

 <?vsp
JIKA (http_request_header (baris, 'Asal', NULL) = 'http://host.org')
{
  http_header ('Access-Control-Allow-Origin: http://host.org\r\n');
}
LAIN
{
  KEMBALI;
}
-- Kode tambahan di sini ---
?>

19. CORS di WCF

Untuk layanan WCF Anda harus mengembangkan perilaku baru dan memasukkannya ke dalam konfigurasi titik akhir:

Buat Pemeriksa Pesan
 CustomHeaderMessageInspector kelas publik : IDispatchMessageInspector
            {
                Kamus<string, string> diperlukanHeaders;
                CustomHeaderMessageInspector publik (Header <string, string> Kamus)
                {
                    diperlukanHeader = header ?? Kamus baru<string, string>();
                }

                objek publik AfterReceiveRequest(ref System.ServiceModel.Channels.Message request, System.ServiceModel.IClientChannel channel, System.ServiceModel.InstanceContext instanceContext)
                {
                    kembali nol;
                }

                public void BeforeSendReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
                {
                    var httpHeader = reply.Properties["httpResponse"] sebagai HttpResponseMessageProperty;
                    foreach (item var di requiredHeaders)
                    {
                        httpHeader.Headers.Add(item.Key, item.Value);
                    }           
                }
            }

Buat Perilaku Titik Akhir dan gunakan Pemeriksa Pesan untuk menambahkan tajuk

 kelas publik EnableCrossOriginResourceSharingBehavior : BehaviorExtensionElement, IEndpointBehavior
            {
                public void AddBindingParameters(ServiceEndpoint endpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
                {
           
                }

                public void ApplyClientBehavior(Titik akhir ServiceEndpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
                {
            
                }

                public void ApplyDispatchBehavior(Titik akhir ServiceEndpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
                {
                    var requiredHeaders = Kamus baru<string, string>();

                    diperlukanHeaders.Add("Access-Control-Allow-Origin", "*");
                    diperlukanHeaders.Add("Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS");
                    diperlukanHeaders.Add("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add(CustomHeaderMessageInspector baru(requiredHeaders));
                }

                validasi kekosongan publik (titik akhir ServiceEndpoint)
                {
            
                }

                menimpa publik Tipe Perilaku Tipe
                {
                    dapatkan { return typeof(EnableCrossOriginResourceSharingBehavior); }
                }

                objek override yang dilindungi CreateBehavior()
                {
                    kembalikan EnableCrossOriginResourceSharingBehavior baru();
                }
            }

Daftarkan perilaku baru di web.config

 <ekstensi>
              <behaviorExtensions>        
                <add name="crossOriginResourceSharingBehavior" type="Services.Behaviours.EnableCrossOriginResourceSharingBehavior, Layanan, Versi=1.0.0.0, Budaya=netral" />        
              </behaviorExtensions>      
            </ekstensi>

Tambahkan perilaku baru ke konfigurasi perilaku titik akhir

 <perilaku titik akhir>      
            <behavior name="jsonBehavior">
                <webHttp />
                <crossOriginResourceSharingBehavior />
            </perilaku>
            </endpointBehaviors>

Konfigurasikan titik akhir

 <endpoint address="api" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="Service.IServiceContract" />

API yang mendukung CORS

  • Amazon S3
  • Sorotan DBpedia
  • Dropbox API
  • API Grafik Facebook
  • API Flickr
  • API FourSquare
  • Google API
  • Penyimpanan Google Cloud
  • GitHub v3 API
  • API MediaWiki
  • awalan.cc
  • PublikasikanDataSaya
  • sama dengan
  • SoundCloud API
  • API Pencarian Spotify
  • API Kongres Sinar Matahari
  • Pembakar URI
  • API YouTube (pos blog)
  • API doctape

Perpustakaan untuk mengimplementasikan CORS

  • Filter CORS, untuk aplikasi Web Java
  • cors-python, untuk aplikasi web Python
  • Aktifkan CORS pada konten statis di Google AppEngine.
  • RDF::LinkedData versi 0.16 dan yang lebih baru
  • cors-filter: Implementasi Java Servlet Filter dari CORS sisi server untuk wadah web, oleh eBay Software Foundation
  • add-cors-to-couchdb: CLI untuk menambahkan dukungan CORS ke CouchDB, untuk digunakan di pustaka klien seperti PouchDB.

Terima kasih telah membaca ini pos. Semoga tutorial ini akan membantu Anda untuk Mengaktifkan Cross-Origin Resource Sharing .

Silakan berikan komentar dan komentar Anda di bawah ini.