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

Catatan mod : Pertanyaan ini tentang mengapa Postman tidak tunduk pada batasan CORS dengan cara yang sama seperti XMLHttpRequest. Pertanyaan ini bukan tentang bagaimana memperbaiki kesalahan "Tidak Ada 'Akses-Kontrol-Izinkan-Asal' ...".

Tolong hentikan posting :

• Konfigurasi CORS untuk setiap bahasa / kerangka kerja di bawah matahari. Alih-alih, temukan pertanyaan bahasa / kerangka kerja Anda yang relevan .
• Layanan pihak ke-3 yang memungkinkan permintaan untuk menghindari CORS
• Opsi baris perintah untuk mematikan CORS untuk berbagai browser

Saya mencoba melakukan otorisasi menggunakan JavaScript dengan menghubungkan ke RESTful API 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. Karenanya, 'null' tidak diizinkan untuk mengakses.

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

Jika saya memahaminya dengan benar, Anda melakukan XMLHttpRequest ke domain yang berbeda dengan 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. 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 biasa dapat menggunakan objek XMLHttpRequest untuk mengirim dan menerima data dari server jarak jauh, tetapi dibatasi oleh kebijakan asal yang sama. Ekstensi tidak begitu terbatas. Ekstensi dapat berbicara dengan server jarak jauh di luar asalnya, asalkan ia pertama kali meminta izin lintas-asal.

PERINGATAN: Menggunakan Access-Control-Allow-Origin: *dapat membuat API / situs web Anda rentan terhadap serangan pemalsuan permintaan lintas situs (CSRF). Pastikan Anda memahami risikonya sebelum menggunakan kode ini.

Ini sangat sederhana untuk dipecahkan jika Anda menggunakan PHP . Cukup tambahkan skrip berikut di awal halaman PHP Anda yang menangani permintaan:

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

Jika Anda menggunakan Node-red Anda harus mengizinkan CORS dalam node-red/settings.jsfile 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"
},

Jika Anda menggunakan Flask sama dengan pertanyaan; Anda harus menginstal terlebih dahuluflask-cors

$ pip install -U flask-cors

Kemudian sertakan flask cors dalam aplikasi Anda.

from flask_cors import CORS

Aplikasi sederhana akan terlihat seperti:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Untuk lebih jelasnya, Anda dapat memeriksa dokumentasi Flask .

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

Keduanya berbeda. Tukang pos memanggil "POST" dengan benar, tetapi ketika kita menyebutnya, itu akan menjadi "PILIHAN".

Untuk layanan web C # - Web API

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>

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

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

Menerapkan pembatasan CORS adalah fitur keamanan yang ditentukan oleh server dan diimplementasikan oleh browser .

Browser melihat kebijakan CORS server dan menghormatinya.

Namun, alat tukang pos tidak peduli tentang kebijakan server CORS.

Itulah sebabnya kesalahan CORS muncul di browser, tetapi tidak di Postman.

Dalam penyelidikan di bawah ini sebagai API, saya menggunakan http://example.com daripada http: // myApiUrl / login dari pertanyaan Anda, karena ini yang pertama berfungsi.

Saya berasumsi bahwa halaman Anda ada di http: //my-site.local: 8088 .

Alasan mengapa Anda melihat hasil yang berbeda adalah Postman:

• atur tajuk Host=example.com(API Anda)
• JANGAN mengatur tajuk Origin

Ini mirip dengan cara browser mengirim permintaan ketika situs dan API memiliki domain yang sama (browser juga mengatur item header Referer=http://my-site.local:8088, namun saya tidak melihatnya di Postman). Ketika Origintajuk tidak disetel, biasanya server mengizinkan permintaan semacam itu secara default.

Ini adalah cara standar bagaimana Postman mengirim permintaan. Tetapi browser mengirimkan permintaan secara berbeda ketika situs dan API Anda memiliki domain yang berbeda , dan kemudian CORS muncul dan browser secara otomatis:

• set header Host=example.com(milik Anda sebagai API)
• set header Origin=http://my-site.local:8088(situs Anda)

(Header Referermemiliki nilai yang sama dengan Origin). Dan sekarang di tab Konsol & Jaringan Chrome Anda akan melihat:

Ketika Anda memiliki Host != Originini adalah CORS, dan ketika server mendeteksi permintaan semacam itu, biasanya diblokir secara default .

Origin=nulldiatur ketika Anda membuka konten HTML dari direktori lokal, dan mengirimkan permintaan. Situasi yang sama adalah ketika Anda mengirim permintaan di dalam <iframe>, seperti di cuplikan di bawah ini (tapi di sini Hosttajuk tidak disetel sama sekali) - secara umum, di mana pun spesifikasi HTML mengatakan asal buram, Anda dapat menerjemahkannya ke Origin=null. Informasi lebih lanjut tentang ini dapat Anda temukan di sini .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Jika Anda tidak menggunakan permintaan CORS sederhana, biasanya browser secara otomatis juga mengirimkan permintaan OPSI sebelum mengirim permintaan utama - informasi lebih lanjut ada di sini . Cuplikan di bawah ini menunjukkannya:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Anda dapat mengubah konfigurasi server Anda untuk memungkinkan permintaan CORS.

Berikut adalah contoh konfigurasi yang mengaktifkan CORS pada nginx (file nginx.conf) - sangat berhati-hati dengan pengaturan always/"$http_origin"untuk nginx dan "*"untuk Apache - ini akan membuka blokir CORS dari domain apa pun.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Berikut adalah contoh konfigurasi yang menyalakan CORS di Apache (file .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Mengalami kesalahan yang sama dalam berbagai kasus penggunaan.

Use Case: Dalam chrome ketika mencoba memanggil titik akhir Spring REST dalam sudut.

Solusi: Tambahkan anotasi @CrossOrigin ("*") di atas masing-masing Kelas Kontroler.

Jika Anda menggunakan .NET sebagai tingkat menengah Anda, periksa atribut rute dengan jelas, misalnya,

Saya punya masalah ketika sudah seperti ini,

[Route("something/{somethingLong: long}")] //Space.

Memperbaikinya dengan ini,

[Route("something/{somethingLong:long}")] //No space

Hanya untuk proyek .NET Core Web API, tambahkan perubahan berikut:

1. Tambahkan kode berikut setelah services.AddMvc()baris dalam ConfigureServices()metode file Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Tambahkan kode berikut setelah app.UseMvc()baris dalam Configure()metode file Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Buka pengontrol yang ingin Anda akses di luar domain dan tambahkan atribut berikut ini di tingkat pengontrol:

[EnableCors("AllowOrigin")]