React客户端对接HapiJS 16跨域问题求助：OPTIONS请求404且CORS校验失败

你遇到的是典型的跨域资源共享（CORS）问题，结合HapiJS 16的特性，问题根源很明确：浏览器发送非简单请求（比如带自定义头的POST）时会先发起OPTIONS预检请求，而你的Hapi服务既没有处理这个请求，也没有配置CORS响应头，所以才会出现404和跨域拦截提示。

下面是具体的解决步骤：

方法1：全局配置CORS（推荐） #

在创建Hapi服务器时全局开启CORS，这样所有路由都会自动处理OPTIONS预检请求，无需单独配置：

const Hapi = require('hapi');
const server = new Hapi.Server();

// 配置服务器连接时启用CORS规则
server.connection({
  port: 3001,
  routes: {
    cors: {
      origin: ['http://localhost:3000'], // 只允许你的React客户端域名，生产环境替换为实际业务域名
      additionalHeaders: ['content-type'], // 允许POST请求的Content-Type头
      credentials: true // 如果请求需要携带Cookie等凭证，务必开启此项
    }
  }
});

// 定义你的POST路由
server.route({
  method: 'POST',
  path: '/sentilize/', // 确保路径和客户端请求的完全一致（包括末尾的斜杠）
  handler: (request, reply) => {
    // 这里编写你的业务处理逻辑
    reply({ status: 'success', data: '请求已处理' });
  }
});

server.start(err => {
  if (err) throw err;
  console.log(`Server running at ${server.info.uri}`);
});

方法2：单个路由配置CORS #

如果只需要给特定路由开启CORS，可以在路由的config字段里单独设置：

server.route({
  method: 'POST',
  path: '/sentilize/',
  config: {
    cors: {
      origin: ['http://localhost:3000'],
      additionalHeaders: ['content-type']
    }
  },
  handler: (request, reply) => {
    // 业务处理逻辑
    reply({ message: '请求处理成功' });
  }
});

关键注意事项 #

• 路径匹配：确保路由的path和客户端请求的URL完全一致，比如客户端请求的是/sentilize/（带末尾斜杠），路由路径也要对应；如果想兼容带/不带斜杠的情况，可以写成/sentilize{/}。
• 生产环境安全：不要使用origin: ['*']（允许所有域名），务必指定具体的业务域名，避免安全风险。
• 预检请求自动处理：HapiJS 16在配置CORS后会自动处理OPTIONS预检请求，不需要手动编写OPTIONS路由。

内容的提问来源于stack exchange，提问作者Asool