Политика CORS: нет проблемы «Access-Control-Allow-Origin» / 500 (внутренняя ошибка сервера) - PullRequest
Новая
       11

Политика CORS: нет проблемы «Access-Control-Allow-Origin» / 500 (внутренняя ошибка сервера)

0 голосов
/ 01 апреля 2019

Обычно я пытаюсь получить имя пользователя по идентификатору из Sequelize.Проблема в том, что я застрял с проблемой CORS или 500 Внутренняя ошибка сервера в зависимости от ответа (состояние)

cors и 500

код контроллера 

    async getUserFromUserId (req, res) {
        try {
            // const user = await User.findByPk(req.body.id)
            const id = req.body.id
            const user = await User.findByPk(id)
            res.send(user.username)
            } catch (err) {

            // or res.status(some random number).send() for CORS problem to appear

            res.status(500).send({
                error: 'an error has occured trying to fetch the users id'
            })
        }
    },

код клиента 

this.notifiedUser = (await UserService.getUserFromUserId({id: UserId})).data

Я получаю статус: 200 ОК от почтальона. Почтальон Решение

Редактировать: я видел, как другие Решение для Corsy вещь, но решения не указывает, почему я получаю "неопределенные" результаты послерешение проблемы с корсом.

Ответы [ 3 ]

1 голос
/ 01 апреля 2019

Итак, CORS на самом деле очень неприятен в этом отношении, но есть довольно простой способ это исправить. Это очень полезная функция безопасности, хотя иногда она в лучшем случае разочаровывает.

Ваш браузер выполняет так называемый предварительный запрос, который имеет http-глагол OPTIONS. Ваш браузер вызывает любой маршрут, который вы хотите, но вместо того, что вы просили сделать, сначала он вызывает OPTIONS. Ваш сервер должен принимать все маршруты, которые клиент может запрашивать с помощью метода OPTIONS, а ваш сервер должен отвечать следующими заголовками, чтобы получить доступный извне, кросс-исходный API. 

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, ...

(обратите внимание, вы не должны помещать ... в, но вы можете поместить любой HTTP-глагол в этот список)

Если вам требуются ваши собственные заголовки (для целей аутентификации), вы хотите добавить этот заголовок для Client -> Server. 

Access-Control-Allow-Headers: YourHeader, YourHeader2, YourHeader3

Вы хотите добавить это для Сервера -> Клиент 

Access-Control-Expose-Headers: YourHeader,YourHeader3

Обратите внимание, что вызов OPTIONS - это совершенно отдельный вызов, который вы должны обрабатывать так же, как и метод GET.

Вы сказали браузеру, что ему разрешено запрашивать, и что он может ожидать от вашего API. Если вы не ответите на запрос OPTIONS, браузер завершит запрос, что приведет к ошибке CORS.

Я собираюсь сделать предположение и предположить, что вы, вероятно, используете Express, который в этом ответе описывает, как установить заголовки.

Что означают заголовки на английском языке?

Access-Control-Allow-Origin Откуда клиентам разрешен доступ к этому ресурсу (конечной точке)? Это может соответствовать частичным доменам с подстановочными знаками, или просто *, чтобы разрешить где угодно.

Access-Control-Allow-Methods Какие методы HTTP допустимы на этом маршруте?

Access-Control-Expose-Headers Когда я получаю ответ от сервера, что я (браузер) должен предоставить клиенту?

Access-Control-Allow-Headers Что мне, как клиентской стороне, разрешено отправлять в качестве заголовков?

0 голосов
/ 02 апреля 2019

Хорошо, я понял проблему.В некотором смысле, мне не приходилось иметь дело с какими-либо вещами cors, потому что я считаю, что это не было основным источником проблемы.

Таким образом, вместо доступа к данным моей базы данных через «GET» и полученияданные, выполнив это: 

this.data = (Service.function(bodyValue)).data

Я сделал "POST", чтобы получить данные, и получил доступ к данным, просто выполнив это 

const response = Service.function({
                    id: bodyValue
                })
this.data = response.data

Это позволяет получить доступ к данным без необходимости получать "защищенной информации из базы данных, но путем доступа к данным из базы данных путем получения Observer информации об объекте из базы данных.

Observer объект выглядит как следует , который обрабатывает пользовательские данные как объект вместо чистых данных.

По сравнению с данными объект , где каждые данные {...} имеют информацию о пользователе.

Я не уверен, что использую правильные слова, но это в меру моего текущего понимания.

0 голосов
/ 01 апреля 2019

Если ваш источник от localhost, Chrome обычно блокирует любой запрос CORS, исходящий от этого источника.

Вы можете установить это расширение:

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Или вы можете отключить защиту при запуске Chrome (добавьте флаг):

- отключить-веб-безопасность

...