Question

我使用Hapijs（版本17.2.3）开发API。在前端，我使用了Admin-on-rest framework。 Hapijs API在http://localhost:3000运行，而Admin-on-rest在http://localhost:3001运行。

要显示用户列表，请向Admin-on-rest面板中的http://localhost:3000/api/users发送请求。然后我在Chrome控制台中收到错误：

无法加载http://localhost:3000/api/users?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22DESC%22%5D：预检响应中的Access-Control-Allow-Headers不允许使用请求标头字段内容类型。

为了解决这个问题，我搜索了很多，但问题没有解决，我没有找到原因。如何解决问题！？

我对Hapijs服务器的配置是：

'use strict';

const Hapi = require('hapi');
const Boom = require('boom');
const glob = require('glob');
const path = require('path');
const Config = require('./config');
const { Model } = require('objection');
const Knex = require('knex');
const KnexConfig = require('./knexfile');

// Initialize knex.
const knex = Knex(KnexConfig);

// Bind all Models to a knex instance. If you only have one database in
// your server this is all you have to do. For multi database systems, see
// the Model.bindKnex method.
Model.knex(knex);

// The connection object takes some
// configuration, including the port
const server = Hapi.server({
    port: Config.server.port,
    host: Config.server.host,
    routes: {
        cors: {
            origin: ['*'],
            credentials: true,
            additionalHeaders: ['headers', 'x-csrf-token', 'authorization', 'content-type']
        }
    }
});

const init = async () => {
    await server.start();
    console.log(`Server running at: ${server.info.uri}`);
};
process.on('unhandledRejection', (err) => {
    console.log(err);
    process.exit(1);
});

// Look through the routes in
// all the subdirectories of API
// and create a new route for each
glob
.sync('api/**/routes/*.js', {
    root: __dirname
})
.forEach(file => {
    const route = require(path.join(__dirname, file));
    server.route(route);
});

// Start the server
init();

Admin-on-rest的我的App.js配置是：

import React from 'react';
import { jsonServerRestClient, Admin, Resource, Delete, fetchUtils, simpleRestClient  } from 'admin-on-rest';
import PostIcon from 'material-ui/svg-icons/action/book';
import UserIcon from 'material-ui/svg-icons/social/group';
import VideoIcon from 'material-ui/svg-icons/social/group';
import farsiMessages from 'aor-language-farsi';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import './index.css';

import { PostList, PostEdit, PostCreate } from './Posts';
import { VideoList } from './Videos';
import { UserList, UserCreate, UserEdit } from './Users';
import Dashboard from './Dashboard';
import authClient from './authClient';

// Set Farsi messages
const messages = {
    'fa': farsiMessages,
};

// Customize Theme
const myTheme = {
    isRtl: true,
    fontFamily: 'IRANSans'
};

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    return fetchUtils.fetchJson(url, options);
}

const App = () => (
    <Admin 
    theme={getMuiTheme(myTheme)} 
    authClient={authClient} 
    dashboard={Dashboard} 
    locale="fa" messages={messages} 
    restClient={simpleRestClient('http://localhost:3000/api', httpClient)}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} remove={Delete} icon={PostIcon}  />
        <Resource name="videos" list={VideoList} icon={VideoIcon}  />
        <Resource edit={UserEdit} create={UserCreate} name="users" list={UserList} icon={UserIcon} />
    </Admin>
);

export default App;

Answer 1

你试过这个......它可能会解决问题

const server = Hapi.server({
    port: Config.server.port,
    host: Config.server.host,
    routes: {
        cors: true
    }
});

Answer 2

安装并运行cors-作为反向代理的任何地方

$ npm install cors-anywhere

$ cd cors-anywhere

$ vi server.js将IP修改为本地服务器IP地址和端口

$ cd cors-anywhere

$ node server.js

然后使用此代理服务器网址为您的rest api url添加前缀。例如：http://localhost:8080/http://localhost:3000/api/users

localhost端口上的Admin-on-rest跨域请求

2 个答案: