CORS: Tidak dapat menggunakan wildcard di Access-Control-Allow-Origin ketika flag kredensial benar

Saya memiliki pengaturan yang melibatkan

Server frontend (Node.js, domain: localhost: 3000) <---> Backend (Django, Ajax, domain: localhost: 8000)

Browser <- webapp <- Node.js (Melayani aplikasi)

Browser (webapp) -> Ajax -> Django (Melayani permintaan POST ajax)

Sekarang, masalah saya di sini adalah dengan pengaturan CORS yang digunakan webapp untuk melakukan panggilan Ajax ke server backend. Di chrome, saya terus mendapatkan

Tidak dapat menggunakan wildcard di Access-Control-Allow-Origin ketika flag kredensial benar.

juga tidak berfungsi pada firefox.

Pengaturan Node.js saya adalah:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

Dan di Django saya menggunakan middleware ini bersamaan dengan ini

Webapp membuat permintaan seperti itu:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

Jadi, header permintaan yang dikirim webapp terlihat seperti:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

Dan inilah tajuk respons:

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

Di mana saya salah ?!

Sunting 1: Saya telah menggunakan chrome --disable-web-security, tetapi sekarang ingin semuanya benar-benar berfungsi.

Sunting 2: Jawab:

Jadi, solusi untuk saya django-cors-headerskonfigurasi:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

Ini adalah bagian dari keamanan, Anda tidak dapat melakukan itu. Jika Anda ingin mengizinkan kredensial maka Anda Access-Control-Allow-Origintidak boleh menggunakannya *. Anda harus menentukan protokol + domain + port yang tepat. Untuk referensi, lihat pertanyaan-pertanyaan ini:

1. Subdomain, port, dan protokol wildcard Access-Control-Allow-Origin
2. Berbagi Sumberdaya Silang Asal dengan Kredensial

Selain *itu terlalu permisif dan akan mengalahkan penggunaan kredensial. Jadi atur http://localhost:3000atau http://localhost:8000sebagai header boleh asal.

Jika Anda menggunakan CORS middleware dan Anda ingin mengirim withCredentialboolean true, Anda dapat mengkonfigurasi CORS seperti ini:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));

Jika Anda menggunakan, expressAnda dapat menggunakan paket kor untuk memungkinkan CORS seperti itu alih-alih menulis middleware Anda;

var express = require('express')
, cors = require('cors')
, app = express();

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});

Cobalah:

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

Jika Anda ingin mengizinkan semua asal dan menjaga kredensial tetap benar, ini bekerja untuk saya:

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));

(Sunting) Add-on yang direkomendasikan sebelumnya tidak tersedia lagi, Anda dapat mencoba yang lain ini

Untuk tujuan pengembangan di Chrome, menginstal pengaya ini akan menghilangkan kesalahan khusus itu:

Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687' 
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Setelah menginstal, pastikan Anda menambahkan pola url Anda Intercepted URLsdengan mengklik ikon AddOn ( CORS , hijau atau merah) dan mengisi kotak teks yang sesuai. Contoh pola URL untuk ditambahkan di sini yang akan berfungsi http://localhost:8080adalah:*://*

Ini bekerja untuk saya dalam pengembangan tetapi saya tidak dapat menyarankan bahwa dalam produksi, itu hanya cara berbeda untuk menyelesaikan pekerjaan yang belum disebutkan tetapi mungkin bukan yang terbaik. Pokoknya begini:

Anda bisa mendapatkan asal dari permintaan, lalu menggunakannya di tajuk respons. Begini tampilannya di express:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

Saya tidak tahu apa yang akan terlihat dengan pengaturan python Anda tetapi itu harus mudah diterjemahkan.