CORS 问题，HapiJS HAPI-16

Posted 2023-03-04

【中文标题】CORS 问题，HapiJS HAPI-16

【英文标题】：CORS Issue, HapiJS HAPI-16

【发布时间】：2018-08-26 03:42:00

【问题描述】：

编辑：这只适用于 HapiJS 16- 版本

我有一个客户端在 react 和一个使用 HapiJS 的服务器。

在客户端，我尝试向服务器发出 POST 请求，但出现以下错误

选项http://localhost:3001/sentilize/ 404（未找到）localhost/:1 无法加载http://localhost:3001/sentilize/：对预检的响应 请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3000” 使用权。响应的 HTTP 状态代码为 404。

我在 3001 端口上运行服务器。我在 3000 上运行客户端。

任何帮助/指导将不胜感激。另外，我可以使用 POSTMAN 成功地向服务器发出 post 请求。只是来自 React 是行不通的。

这是我的 server.js

import Hapi from "hapi";
import  routes  from "./routes";

const server = Hapi.server(
  host: "localhost",
  port: 3001,
  routes:  cors: true 
);

// Register Routes
routes.forEach(route => 
  server.route(route);
);

// We need to install babel-polyfill
// because async and await are in es7
async function start() 
  try 
    await server.start();
   catch (err) 
    console.log(err);
  
  console.log("Hapii server is running");


start();

这是在前端进行调用的代码

  fetchSentiment = () => 
    axios
      .post("/", 
        sentence: this.state.value
      )
      .then(response => 
        this.setState( sentiment: response.data );
      )
      .catch(error => 
        console.log("Error: ", error);
      );
  ;

我有一个 axios 实例设置如下 (axios-sentiment.js)

import axios from "axios";

const instance = axios.create(
  baseURL: "http://localhost:3001/sentilize"
);

export default instance;

【问题讨论】：

Postman 不会给你一个 cors 错误，这很正常。

cors: origin: ['allowedhostnamehere']

为什么你的 cors 设置在路线内？

那行不通:(...我还能把它放在哪里？

使用 cors 启用扩展它将在谷歌浏览器中工作 chrome.google.com/webstore/detail/allow-control-allow-origi/…

【参考方案1】：

服务器配置看起来正确。正在使用的客户端 HTTP 库可能未发送正确的标头。特别要确保请求具有Origin 标头。请注意，cors: true 设置仅支持某些 CORS 场景，并非在所有情况下都有效。阅读 simplified requests 以了解 CORS 的一些细微差别。然后route.options.cors 文档会更有意义，如果需要，您可以将其设置为对象以调整其行为。

其他一些不相关的提示：

async await 在 Node 7.6 及更高版本中受支持。你可能根本不需要 babel 或 babel-polyfill。请参阅 node.green 了解支持的语言功能。 尝试/捕获一个仅记录错误的 Promise 链是不应再使用的旧模式。 Promise 错误过去通常被默认吞下，但现在不再是，它们被现代版本的 Node（以及浏览器）记录下来。如果您想更加激进，可以使用throw-rejects 来故意使进程崩溃，而不仅仅是记录，这样更容易发现错误。

【讨论】：

谢谢赛斯！不幸的是，当我尝试这个时，我得到一个编译错误，说选项是不允许的.. AssertionError [ERR_ASSERTION]: Invalid server options "host": "localhost", "port": 3001, "routes": , "options" [1]: "routes": "cors": true [1] "options" 是不允许的

同样@Asool，我必须在我的路由配置中设置它，我无法在初始 http 配置中设置它。

@felipekm 该语法是什么样的？我正在查看我的 hapi.js In Action 书籍，但没有看到该选项。

糟糕！我撒了谎。第 261 页有答案： server.route([ config: cors: true , method: 'GET', path: '/param*',

请注意，服务器 API 的结构和配置在 hapi 16 和 hapi v17 之间发生了变化。如果有人可以发布重现问题的 CodeSandbox，我很乐意进行更深入的研究。