使用 Hapi 插件 Hapi-cors 解决跨域问题-JavaScript中文网-JavaScript教程资源分享门户

跨域问题是前端开发中常遇到的一个问题，如果不处理好跨域问题，就会出现各种问题，比如无法访问数据、无法使用 Ajax 等等。本文将介绍如何使用 Hapi-cors 插件来解决跨域问题。

什么是跨域

在 web 开发中，如果一个页面的地址为 http://www.example.com，那么它只能请求这个域名下的资源，不能请求其他域名下的资源。如果要请求其他域名下的资源，就需要跨域访问。

跨域的解决方案

在前端开发中，跨域问题有多种解决方案，其中比较常见的有以下几种：

使用 JSONP：JSONP 只能用于 GET 请求，它利用了 script 标签可以跨域加载资源的特性，通过后端将返回的数据包装在一个指定的回调函数中，再返回给前端，前端通过回调函数获取到返回的数据。
使用 CORS：CORS 是一种官方推荐的解决跨域问题的方案，后端通过设置响应头，允许客户端跨域访问。

Hapi-cors 插件介绍

Hapi-cors 是 Hapi 框架下的一个解决跨域问题的插件，它只需要在后端的路由中配置一下就可以解决跨域问题，非常方便。

Hapi-cors 的使用

安装 Hapi-cors

使用 npm 安装 Hapi-cors 插件：

npm install hapi-cors

配置 Hapi-cors

在 Hapi 的路由中引入 hapi-cors 插件：

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

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

server.ext('onPreResponse', corsHeaders);

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

配置选项

Hapi-cors 插件支持以下选项：

origins: 允许跨域访问的域名，可以是字符串、数组或函数。
methods: 允许跨域访问的 HTTP 方法，默认为 GET,HEAD,PUT,PATCH,POST,DELETE。
headers: 允许跨域访问的头信息，默认为 accept,content-type。

const corsHeaders = {
    origin: ['*'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    headers: ['Accept', 'Content-Type', 'Authorization']
};
server.ext('onPreResponse', corsHeaders);

示例代码

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

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

const corsOptions = {
    origins: ['*'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    headers: ['Accept', 'Content-Type', 'Authorization']
};

server.ext('onPreResponse', corsHeaders);

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

server.route({
    method: 'GET',
    path: '/api/data',
    handler: (request, h) => {
        return {
            data: [
                {id: 1, name: 'Alice'},
                {id: 2, name: 'Bob'}
            ]
        };
    }
});

server.route({
    method: 'POST',
    path: '/api/data',
    handler: (request, h) => {
        const payload = request.payload;
        console.log(payload);
        return payload;
    }
});

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

总结

使用 Hapi-cors 插件可以轻松地解决跨域问题，让前端开发更加便捷。同时，Hapi-cors 的配置选项也非常灵活，可以根据实际需要进行配置。

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