本地主机端口上的静态管理员跨域请求

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 控制台中得到错误：

Failed to load http://localhost:3000/api/users?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22DESC%22%5D: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

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

我的 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-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

本地主机端口上的静态管理员跨域请求

Admin-on-rest Cross-Domain Requests on localhost port

api

node.js

hapijs

admin-on-rest