如何使用 loopback 4 修复（将 rest 翻译成 graphql）：OPTIONS http://localhost:3001/graphql 405（方法不允许）

Question

我正在将 postgresql 与环回 4 连接起来，并使用 axios + restful 在前端调用 API 并成功完成。

但是当我尝试将 postgresql 与环回 4 连接并使用 axios + graphql 在前端调用 API 时，它在浏览器的控制台上给出了这 3 个错误：

选项http://localhost:3001/graphql 405（方法不允许）
从源“http://localhost:8081”访问位于“http://localhost:3001/graphql”的 XMLHttpRequest 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' header。
错误：网络错误在 createError (createError.js?2d83:16) 在 XMLHttpRequest.handleError (xhr.js?b50d:87)

我尝试在谷歌上搜索和阅读，但大多数都没有使用环回。

我遵循了这个教程，

但还是没有解决。

这里是我的源码修改，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 选项可以启用对 cross-origin 请求的支持。

以下命令应该可以为您解决问题：

oasgraph --cors [path to saved OAS]

已定义 CLI 选项 here:

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

并将 the following change 应用于 Express 应用程序：

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

如何使用 loopback 4 修复（将 rest 翻译成 graphql）：OPTIONS http://localhost:3001/graphql 405（方法不允许）

How to fix using loopback 4 (translate rest to graphql) : OPTIONS http://localhost:3001/graphql 405 (Method Not Allowed)

postgresql

loopback

vue.js

graphql

openapi