Hapi 的 CORS 实现-JavaScript中文网-JavaScript教程资源分享门户

CORS（Cross-Origin Resource Sharing）是一种机制，它允许 Web 应用程序在浏览器中请求另一个域名下的资源。在前端开发中，我们经常需要在浏览器中请求不同域名下的资源，比如跨域请求 API 接口，这时候就需要使用 CORS 机制来进行跨域访问。

在 Hapi 中，我们可以很方便地实现 CORS 机制。本文将介绍 Hapi 的 CORS 实现，并提供示例代码。

Hapi 的 CORS 插件

Hapi 提供了一个名为 hapi-cors 的插件，它可以帮助我们快速实现 CORS 机制。在使用该插件之前，我们需要先安装它：

npm install hapi-cors

安装完成后，我们需要在 Hapi 的服务器配置中注册该插件：

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const HapiCors = require('hapi-cors');

const server = new Hapi.Server({
  port: 3000,
  host: 'localhost'
});

const init = async () => {
  await server.register({
    plugin: HapiCors,
    options: {
      origins: ['*'],
      methods: ['GET', 'POST', 'PUT', 'DELETE'],
      headers: ['Authorization']
    }
  });

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

init();

在上面的代码中，我们使用 server.register 方法注册了 hapi-cors 插件，并传入了一些配置参数：

origins：指定允许跨域访问的域名列表。可以使用通配符 * 表示允许所有域名访问。
methods：指定允许的 HTTP 方法。
headers：指定允许的 HTTP 头信息。

当我们启动服务器后，hapi-cors 插件会自动添加 CORS 相关的 HTTP 头信息到响应中，从而实现跨域访问。

示例代码

为了更好地理解 Hapi 的 CORS 实现，我们可以通过一个示例来演示它的使用。

假设我们有一个 RESTful API，它提供了一个 /api/users 接口，用于获取所有用户信息。我们在本地开发环境中使用 localhost:3000 运行该 API，然后在前端页面中通过 AJAX 请求该接口。

为了避免跨域访问问题，我们需要在 localhost:3000 的服务器端启用 CORS 机制。我们可以使用上面提到的 hapi-cors 插件来实现。下面是服务器端的代码：

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const HapiCors = require('hapi-cors');

const server = new Hapi.Server({
  port: 3000,
  host: 'localhost'
});

const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
];

server.route({
  method: 'GET',
  path: '/api/users',
  handler: (request, h) => {
    return users;
  }
});

const init = async () => {
  await server.register({
    plugin: HapiCors,
    options: {
      origins: ['*'],
      methods: ['GET'],
      headers: ['Authorization']
    }
  });

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

init();

在上面的代码中，我们定义了一个 users 数组，用于存储用户信息。然后我们定义了一个 /api/users 接口，用于返回所有用户信息。

在启用 hapi-cors 插件后，我们可以在前端页面中通过 AJAX 请求该接口。下面是前端页面的示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>跨域请求示例</title>
</head>
<body>
  <button id="get-users">获取用户信息</button>
  <ul id="user-list"></ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('#get-users').click(function() {
        $.ajax({
          url: 'http://localhost:3000/api/users',
          type: 'GET',
          xhrFields: {
            withCredentials: true
          },
          success: function(data) {
            var userList = $('#user-list');
            userList.empty();
            data.forEach(function(user) {
              userList.append('<li>' + user.name + '</li>');
            });
          },
          error: function() {
            alert('获取用户信息失败');
          }
        });
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们通过 jQuery 发送了一个 GET 请求到 http://localhost:3000/api/users 接口，并将返回的用户信息显示在页面中。

在启用 hapi-cors 插件后，我们可以在前端页面中跨域请求该接口，从而成功获取到用户信息。

总结

本文介绍了 Hapi 的 CORS 实现，并提供了示例代码。通过使用 hapi-cors 插件，我们可以很方便地启用 CORS 机制，从而实现跨域访问。希望本文对大家学习和使用 Hapi 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6577c5f8d2f5e1655d1787f2