Question

编辑：这仅适用于HapiJS 16版本

我有一个客户端在反应和服务器使用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成功向服务器发出请求。它只是来自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;

Answer 1

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

其他一些不相关的提示：

async await。你可能根本不需要babel或babel-polyfill。请参阅node.green以了解支持哪些语言功能。
尝试/捕获Promise链只是为了记录错误是一个不应该再使用的旧模式。默认情况下，承诺错误曾被吞并，但它们已不再存在，它们由现代版本的Node（以及浏览器）记录。如果你想要更积极，你可以使用throw-rejects故意使进程崩溃，而不仅仅是记录，这样可以更容易地发现错误。

CORS问题，HapiJS HAPI-16

编辑：这仅适用于HapiJS 16版本

1 个答案: