CORS: Не можна використовувати підстановку в Access-Control-Allow-Origin, коли прапор облікових даних є істинним

У мене налаштування за участю

Frontend-сервер (Node.js, домен: localhost: 3000) <---> Backend (Django, Ajax, домен: localhost: 8000)

Браузер <- webapp <- Node.js (Обслуговувати додаток)

Веб-переглядач (webapp) -> Ajax -> Django (Обслуговування ajax POST-запитів)

Тепер моя проблема полягає в налаштуванні CORS, який webapp використовує для здійснення Ajax дзвінків на сервер бекенда. У хромі я продовжую отримувати

Неможливо використовувати підстановку в Access-Control-Allow-Origin, коли прапор облікових даних є істинним.

також не працює на Firefox.

Моя настройка Node.js:

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

І в Django я використовую це програмне забезпечення разом з цим

Вебппп робить запити як такі:

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

Отже, заголовки запитів, які надсилає web-сайт, виглядають так:

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="***"

І ось заголовок відповіді:

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

Де я помиляюся ?!

Редагувати 1: Я використовував chrome --disable-web-security, але тепер хочу, щоб фактично працювали.

Редагувати 2: Відповідь:

Отже, рішення для мене django-cors-headersконфігурація:

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/
)

Це частина безпеки, ви не можете цього зробити. Якщо ви хочете дозволити облікові дані, ви Access-Control-Allow-Originне повинні використовувати їх *. Вам доведеться вказати точний протокол + домен + порт. Для ознайомлення див. Ці питання:

1. Піддомени, порти та протоколи підключення підключення підключення доступу, контроль та дозвіл
2. Перехресне походження ресурсів з використанням облікових даних

Крім того *, занадто дозвільне і може перешкодити використанню облікових даних. Так встановити http://localhost:3000або http://localhost:8000як дозволити вихідний заголовок.

Якщо ви використовуєте проміжне програмне забезпечення CORS і хочете надіслати withCredentialбулеву true, ви можете налаштувати CORS так:

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

Якщо ви користуєтесь, expressви можете використовувати пакет cors, щоб дозволити CORS подібним чином замість того, щоб писати проміжне програмне забезпечення;

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

app.use(cors());

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

Спробуй це:

const cors = require('cors')

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

}
app.use(cors(corsOptions));

Якщо ви хочете дозволити всі джерела і зберегти ідентифікаційні дані, це працювало для мене:

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

(Редагувати) Попередньо рекомендований додаток більше не доступний, ви можете спробувати цей інший

Для розробки в Chrome, встановлення цього додатка позбудеться певної помилки:

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.

Після встановлення переконайтеся, що ви додали свій шаблон URL-адреси Intercepted URLs, натиснувши на значок AddOn ( CORS , зелений або червоний) та заповнивши відповідне текстове поле. Приклад шаблону URL-адреси, який слід додати тут, буде http://localhost:8080:*://*

Це працює для мене в розвитку, але я не можу порадити, що у виробництві це просто інший спосіб виконання роботи, про який не було сказано, але, мабуть, не найкращий. Все одно:

Ви можете отримати походження з запиту, а потім використовувати його у заголовку відповіді. Ось як це виглядає в експресі:

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

Я не знаю, як це могло б виглядати з вашим налаштуванням python, але це слід легко перекласти.