Междоменные запросы администратора на отдыхе на локальном порту

Я использую Hapijs (версия 17.2.3) для разработки API. Во внешнем интерфейсе я использовал фреймворк Admin-on-rest. API Hapijs работает в http://localhost:3000, а Admin-on-rest — в http://localhost:3001.

Чтобы отобразить список пользователей, отправьте запрос на http://localhost:3000/api/users в панели Admin-on-rest. Затем я получаю сообщение об ошибке в консоли 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();

Моя конфигурация App.js для Admin-on-rest:

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;

person Ali Hesari    schedule 03.04.2018    source источник


Ответы (2)


вы пробовали это... это может решить проблему

const server = Hapi.server({
    port: Config.server.port,
    host: Config.server.host,
    routes: {
        cors: true
    }
});
person Ashh    schedule 03.04.2018
comment
Я тестировал этот метод раньше, и это не решение. - person Ali Hesari; 03.04.2018

Установите и запустите cors-anywhere, который служит вашим обратным прокси-сервером.

$ npm install cors-anywhere

$ cd cors-anywhere

$ vi server.js для изменения IP-адреса на IP-адрес и порт локального сервера

$ cd cors-anywhere

$ node server.js

Затем добавьте к URL-адресу вашего API-интерфейса префикс этого URL-адреса прокси-сервера. Например: http://localhost:8080/http://localhost:3000/api/users

person blueheart_2    schedule 06.04.2018