Как исправить с помощью loopback 4 (перевести rest в graphql): ОПЦИИ http://localhost:3001/graphql 405 (метод не разрешен)

Question

Я соединяю postgresql с loopback 4 и вызываю API во внешнем интерфейсе, используя axios + restful, и это было успешно сделано.

Но когда я попытался соединить postgresql с loopback 4 и вызвать API на веб-интерфейсе с помощью axios + graphql, он выдает следующие 3 ошибки на консоли браузера:

• ОПЦИИ http://localhost:3001/graphql 405 (метод не разрешен)

• Доступ к XMLHttpRequest по адресу http://localhost:3001/graphql' от источника 'http://localhost:8081' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: Нет' Access-Control Заголовок -Allow-Origin 'присутствует в запрашиваемом ресурсе.

• Ошибка: ошибка сети при createError (createError.js? 2d83: 16) в XMLHttpRequest.handleError (xhr.js? b50d: 87)

Я пытался искать и читать на Google, но большинство из них не используют loopback.

Я следовал этому уроку,

1. https://v4.loopback.io/getting-started-oasgraph.html
2. https://www.thepolyglotdeveloper.com/2019/01/query-graphql-api-vuejs-axios/

Но все еще не решено.

Вот моя модификация исходного кода, Home.vue.

<template>
    <div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "HelloWorld",
        async mounted() {
            try {
                var result = await axios({
                    method: "POST",
                    url: "http://localhost:3001/graphql",
                    data: {
                        query: `
                            {
                                organizations {
                                  organizationId
                                  organizationName
                                }
                            }
                        `
                    }
                });
                console.log("kk", result);

            } catch (error) {
                console.error(error);
            }
        }
    }
</script>

<style scoped></style>

Я ожидаю, что вывод в консоли должен быть содержимым API. Есть ли какие-то дополнительные настройки, которые я пропустил?

Answer 1

Мне кажется, что запрос отклонен из-за CORS .

Я проверил исходный код oasgraph-cli, по умолчанию CORS не разрешен.К счастью, есть опция CLI для включения поддержки запросов между источниками.

Следующая проблема должна решить эту проблему:

oasgraph --cors [path to saved OAS]

Опция CLI определена здесь :

.option('--cors', 'enable Cross-origin resource sharing (CORS)')

И применяет следующее изменение к приложению Express:

if (program.cors) {
  app.use(cors());
}