如何使用环回 4 进行修复（将 rest 转换为 graphql）：OPTIONS http://localhost:3001/graphql 405（不允许的方法）

Posted 2023-03-08

【中文标题】如何使用环回 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)

【发布时间】：2019-10-09 13:46:51

【问题描述】：

我正在将 postgresql 与 loopback 4 连接，并使用 axios + restful 在前端调用 API，它已成功完成。

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

OPTIONS http://localhost:3001/graphql 405（方法不允许）

从源 'http://localhost:8081' 访问 XMLHttpRequest 在 'http://localhost:3001/graphql' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。

错误：网络错误 在 createError (createError.js?2d83:16) 在 XMLHttpRequest.handleError (xhr.js?b50d:87)

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

我按照本教程进行操作，

https://v4.loopback.io/getting-started-oasgraph.html 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 内容。有没有我错过的其他设置？

【参考方案1】：

在我看来，请求被拒绝是因为CORS。

查看了oasgraph-cli的源码，CORS默认是不允许的。幸运的是，有一个 CLI 选项可以启用对跨域请求的支持。

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

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());