本地端口下Admin-on-rest与Hapi.js 17.2.3 API跨域请求异常

你遇到的是典型的跨域资源共享（CORS）问题——你的Hapi API运行在3000端口，Admin-on-rest前端在3001端口，属于不同的源，浏览器的同源策略会拦截这类跨域请求。尤其是当请求包含Content-Type这类非标准头时，会触发OPTIONS预检请求，如果服务器没有正确配置CORS规则，就会出现你看到的错误。

针对Hapi.js 17.2.3版本，有两种配置方式可以解决这个问题：

1. 全局服务器级CORS配置 #

在创建Hapi服务器时，直接在路由配置里添加CORS规则，所有接口都会生效：

const Hapi = require('hapi');

const server = Hapi.server({
    port: 3000,
    host: 'localhost',
    routes: {
        cors: {
            origin: ['http://localhost:3001'], // 明确允许你的前端域名
            headers: ['Accept', 'Content-Type', 'Authorization'], // 允许前端发送的请求头，包含Admin-on-rest需要的Content-Type
            exposedHeaders: ['Content-Range', 'X-Content-Range'] // 可选：如果API返回分页相关响应头，需要暴露给前端
        }
    }
});

2. 单个路由级CORS配置 #

如果不想全局开启CORS，也可以针对/api/users单独路由配置：

server.route({
    method: 'GET',
    path: '/api/users',
    handler: (request, h) => {
        // 这里写你的用户列表处理逻辑
        return yourUserData;
    },
    options: {
        cors: {
            origin: ['http://localhost:3001'],
            headers: ['Accept', 'Content-Type', 'Authorization'],
            exposedHeaders: ['Content-Range']
        }
    }
});

配置完成后重启Hapi服务器，回到Admin-on-rest面板刷新页面，应该就能正常加载用户列表了。

核心原因是：Admin-on-rest发送的请求包含Content-Type头，属于非简单请求，浏览器会先发送OPTIONS请求询问服务器是否允许。上面的配置告诉服务器接受来自3001端口的请求，并且允许指定的请求头通过，这样预检请求就能通过，实际的GET请求也能正常执行。

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