CORS问题,HapiJS HAPI-16

3

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

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

在客户端中,我尝试向服务器发出 POST 请求,但是却收到以下错误:

OPTIONS 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错误,这是正常的。 - Dan Zuzevich
1
cors: { origin: ['allowedhostnamehere'] } 跨域资源共享:{ origin: ['allowedhostnamehere'] } - Dan Zuzevich
你的CORS设置为什么在路由内部? - Dan Zuzevich
那不起作用...我还能把它放在哪里? - Asool
使用CORS启用扩展程序,它将在谷歌浏览器中运行。https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=zh-CN - Gopinath Kaliappan
1个回答

0

服务器配置看起来正确。有可能是使用的客户端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 来故意崩溃进程而不仅仅是记录错误,这使得查找错误变得更加容易。

谢谢 Seth!不幸的是,当我尝试这样做时,我遇到了编译错误,说选项不被允许。断言错误[ERR_ASSERTION]:无效的服务器选项{ “host”:“localhost”, “port”:3001, “routes”:{}, “options” [1]:{ “routes”:{ “cors”:true } } }[1] “options”不被允许 - Asool
同样的问题 @Asool,我不得不在我的路由配置中设置它,无法在初始http配置中设置。 - felipekm
@felipekm 那个语法是什么样子的?我在我的《hapi.js实战》书中找不到那个选项。 - Not a machine
糟糕!我撒谎了。第261页有答案: server.route([ { config: { cors: true }, method: 'GET', path: '/{param*}', - Not a machine
1
请注意,服务器API和配置的结构在hapi 16hapi v17之间发生了变化。如果有人可以发布一个CodeSandbox来重现问题,我很乐意深入研究。 - Seth Holladay

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接