Если вы разработчик и создаете веб-приложения, вы, должно быть, - хотя бы раз в жизни - сталкивались с ошибкой в ​​консоли разработчика вашего браузера, читая что-то вроде этого:

Чаще всего эта ошибка возникает, когда вы вызываете конечную точку API с помощью API извлечения javascript на ваш сервер nodeJS, работающий на вашем локальном хосте. (скажем http: // localhost: 3000). Это URL-адрес хоста, на котором ваше серверное приложение (в нашем случае приложение Keystone) работает локально на вашем компьютере.

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

Если это так, в этой статье я покажу вам, как устранить эту ошибку в keystoneJS (v4 +) и API извлечения Javascript.

Шаг 1. Во-первых, в вашем JS-приложении (любой JS-фреймворке), где бы вы ни вызывали API с помощью функции выборки, не забудьте указать параметры «Принять» и «Тип содержимого» под заголовками. ”Внутри второго аргумента функции выборки типа Object.

Итак, ваш вызов функции fetch должен выглядеть так:

fetch(config.BaseURL + path, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }

Шаг 2: Затем вам нужно изменить функцию keystone.init () вашего файла keystone.js в вашем внутреннем коде на что-то вроде этого:

keystone.init({
    'cookie secret': 'secure string goes here',
    'name': 'your-project-name',
    'user model': 'User',
    'auto update': true,
    'auth': true,
    'cors allow origin': true,
    'cors allow methods': true,
    'cors allow headers': true,
});

Добавление последних трех ключей в объект, то есть «cors allow origin», «cors allow methods» и «cors allow headers», и установка для них значения true гарантирует, что CORS включен для всех типов origin, заголовков и методов.

Шаг: 3 И последний шаг - изменить файл index.js в папке маршрутов и добавить следующие параметры приложения:

exports = module.exports = function(app){
    app.options('*', (req, res) => {
        res.header('Access-Control-Allow-Origin', '*');
        res.header(
            'Access-Control-Allow-Methods',
            'GET,PUT,POST,DELETE,OPTIONS'
        );
        res.header(
            'Access-Control-Allow-Headers',
            'Content-Type, Authorization'
        );
        res.end();
    });
// and your app routes go below this:
//example:
app.post(
      '/api/users/signUp',
      [keystone.middleware.api,keystone.middleware.cors],
      middleware.tokenAuthCommon, 
      routes.api.User.signUp
);

Обратите внимание, что помимо добавления параметров в нашу функцию, мы также добавляем промежуточное программное обеспечение keystone api и cors для каждого маршрута. Не пропустите!

Надеюсь, эта статья оказалась для вас полезной, и я хочу снова увидеть вас где-нибудь здесь позже, но раньше;)

А пока продолжайте пить свой кофе и продолжайте программировать!

Удачного кодирования! :)