Заблокирован политикой CORS: отсутствует заголовок 'Access-Control-Allow-Origin' [Nodejs]

#node.js #express #cors #xmlhttprequest

#node.js #экспресс #cors #xmlhttprequest

Вопрос:

Точное сообщение об ошибке: Access to XMLHttpRequest at 'http://localhost:7000/profile/picture?url=me' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я использую экспресс-версию 4.16.4. В моем приложении после загрузки изображения и выхода из системы я получаю эту ошибку при повторном входе в систему. Я добавил следующее на свой основной сервер:

 app.use('*', cors({ 
        credentials: true, 
        origin: true, 
        methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS', 
        preflightContinue: true
    }));

... (routes here)

app.all('*', function (req, res, next) {
        origin = req.get('origin');

        // Development whitelist
        var whitelist = ['http://localhost:8080', 'http://localhost:8081'];

        corsOptions = {
            origin: function (origin, callback) {
                    var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
                    callback(null, originIsWhitelisted);
            }
        };

        next();
    });

Я получаю OPTIONS журналы, но ни один из маршрутов не поврежден. Также в Node не выдается сообщений об ошибках.

1. Почему это preflightContinue верно? Что такое . все, что следует за? похоже, это ничего не делает.

2. @KevinB Я пытался ограничить взаимодействие приложения node только с моим приложением vue.

3. Чтобы он вообще работал, он должен был бы появиться перед маршрутами, иначе он мог бы вообще не запускаться. Но код, который у вас внутри, на самом деле ничего не делает. Вы определяете три переменные, которые содержат либо объекты, либо строки, а затем… вызовите next(). Вы могли бы использовать такую функцию вместо вашей первой, чтобы допускать CORS только в свой белый список, но вы не должны использовать оба. Первого должно быть достаточно, чтобы разрешить запросы CORS, предполагая, что вы правильно определяете запросы ОПЦИЙ в какой-то момент и отвечаете 200 или меняете preflightContinue на false.

4. Сейчас я получаю эту ошибку: ...has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

5. Да, не могу использовать «true» для параметра origin для учетных запросов. Вам нужно заменить его обратным вызовом, который возвращает исходное значение. (именно здесь происходит внесение в белый список) github.com/expressjs/cors

Ответ №1:

Попробуйте этот способ:

 const whitelist = [
  'http://localhost:8080',
  'http://localhost:8081'
];

const corsOptions =  (origin) => {
    return whitelist.some(wl=> wl.localeCompare(origin) === 0);
};

app.use( (req, res, next) => {
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    if(!corsOptions(req.headers.origin)){
      const error = {
        erro : "This aren't a public API."
      };
      res.sendStatus(500).json(error);
      next();
    }
    if ('OPTIONS' == req.method) {
      res.sendStatus(200);
    } else {
      next();
    }
  });