Keystone JS CORS

Question

好的，所以我对 Keystone JS 很陌生，我决定将它用作项目的 API 后端。

我的所有 API 端点/路由都已完成，它们在我的浏览器中运行良好，但是当尝试远程获取数据时，我不断收到相同的错误：XMLHttpRequest 无法加载 http://localhost:3000/keystone/api/。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost'。

我对 CORS 并不陌生，并尝试通过将以下内容添加到我的 keystone.js 和 routes/index.js 来启用它

keystone.js：

keystone.set('cors allow origin', true);
keystone.set('cors allow methods', true);
keystone.set('cors allow headers', true);

routes/index.js：

// Setup Route Bindings
exports = module.exports = function (app) {
    app.all('/api/*', keystone.middleware.cors);
    app.options('/api*', function(req, res) { res.send(200); });

    // Views
    app.get('/', routes.views.index);

    // API
    // Lists
    ...

现在我已经尝试通过查看大量文档来找到解决方案，但根据我的发现，这应该足以让 CORS 与 Keystone 一起使用。

除此之外，我还将在我的 Angular JS 1.x 前端中展示我的 Keystone 服务，让您了解我想要实现的目标..

keystone.service.js：

(function() {
    'use strict';

    angular.module('zApp')
        .service('KeystoneService', ['$log', '$http', function($log, $http) {
            var $keystoneApi = {};

            var _handleRequest = function(requestObj) {
                var data = {};

                if(requestObj.withCredentials === undefined) {
                    requestObj.withCredentials = true;
                }

                if(requestObj.method === undefined) {
                    requestObj.method = 'GET';
                }

                $http(requestObj, {headers: $keystoneApi.headers})
                    .then(
                        function success(response) {
                            data = response.data;
                        },
                        function error(response) {
                            // todo; handle error
                            $log.info(response);
                        }
                    );
                return data;
            };

            var _isIdValid = function(id) {
                if(/^[a-zA-Z0-9]*$/.test(id)) {
                    return true;
                }
                return false;
            };

            // Should be changed to oauth when there is better support in Keystone!
            this.init = function(settings) {
                if(settings.url !== undefined && settings.usr !== undefined && settings.pass !== undefined) {
                    $keystoneApi = settings;
                    $keystoneApi.auth = window.btoa($keystoneApi.usr + ':' + $keystoneApi.pass);
                    $keystoneApi.headers = {"Authorization": "Basic " + $keystoneApi.auth};
                    return this;
                }
                return false;
            }

            /**
             * User
             */
            this.getCmsAllUsers = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'User/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsUser = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'User/' + id
                    };

                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.updateCmsUser = function(userObject) {
                if(_isIdValid(userObject.id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'User/' + id + '/update/',
                        data: userObject
                    };

                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Profile
             */
            this.getCmsAllProfiles = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'Profile/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsProfile = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'Profile/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.createCmsProfile = function(profileObject) {
                var requestObj = {
                    url: $keystoneApi.url + 'Profile/create',
                    data: profileObject
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.updateCmsProfile = function(profileObject) {
                if(_isIdValid(profileObject.id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'Profile/' + profileObject.id + '/update',
                        data: profileObject
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.deleteCmsProfile = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'Profile/' + id + '/remove'
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Favourite Template
             */
            this.getCmsAllFavouriteTemplates = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'FavouriteTemplate/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsFavouriteTemplate = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'FavouriteTemplate/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.createCmsFavouriteTemplate = function(favouriteTemplateObject) {
                var requestObj = {
                    url: $keystoneApi.url + 'FavouriteTemplate/create',
                    data: favouriteTemplateObject
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.updateCmsFavouriteTemplate = function(favouriteTemplateObject) {
                if(_isIdValid(favouriteTemplateObject.id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'FavouriteTemplate/' + favouriteTemplateObject.id + '/update',
                        data: favouriteTemplateObject
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.deleteCmsFavouriteTemplate = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'FavouriteTemplate/' + id + '/remove'
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Customer Content
             */
            this.getCmsAllCustomerContent = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'CustomerContent/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsCustomerContent = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'CustomerContent/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Frontpage Content
             */
            this.getCmsAllFrontpageContent = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'FrontpageContent/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsFrontpageContent = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'FrontpageContent/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Faq
             */
            this.getCmsAllFaq = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'Faq/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            /**
             * General Settings
             */
            this.getCmsAllGeneralSettings = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'GeneralSettings/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsGeneralSettings = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'GeneralSettings/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            this.updateCmsGeneralSettings = function(favouriteTemplateObject) {
                if(_isIdValid(favouriteTemplateObject.id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'GeneralSettings/' + favouriteTemplateObject.id + '/update',
                        data: favouriteTemplateObject
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };

            /**
             * Org Units
             */
            this.getCmsAllOrgUnits = function() {
                var requestObj = {
                    url: $keystoneApi.url + 'OrgUnit/'
                };
                var response = _handleRequest(requestObj);
                // todo; handle response
                $log.info(response);
            };

            this.getCmsOrgUnit = function(id) {
                if(_isIdValid(id)) {
                    var requestObj = {
                        url: $keystoneApi.url + 'OrgUnit/' + id
                    };
                    var response = _handleRequest(requestObj);
                    // todo; handle response
                    $log.info(response);
                }
            };
        }]);
})();

是的，我知道我的端点方法中目前缺少逻辑，但目前还没有这个问题，因为除了相同的 CORS 错误之外，这些方法都没有返回任何内容。我也只是在测试阶段使用基本授权，这将被适当的 OAuth 中间件取代，所以请不要对此发表评论，这也是无关紧要的。

非常感谢任何有用的见解。

Answer 1

嗯，这就是 CORS 的意义所在，即可以将前端和后端保持在不同的服务器上。

在 keystone.js 中：

keystone.set('cors allow origin', true);
keystone.set('cors allow methods', true);
keystone.set('cors allow headers', true);

在 routes\index.js 中：任一：

app.get('/api/stuff', [keystone.middleware.api, keystone.middleware.cors], routes.api.workshop.getStuff);

或：

app.get('/api/stuff', keystone.middleware.cors, routes.api.workshop.getStuff);

以及所有其他路线。这就是启用 CORS 标头所需的全部内容。

Answer 2

好的，所以我从朋友那里得到了关于这个问题的建议。

我不断遇到问题的原因是我的前端应用程序位于单独的服务器上，我已将 AngularJS 移动到 keystone/public/，现在我可以访问 API。

可能很明显，但这已经完全超越了我。 希望这可以帮助遇到同样问题的人。

Answer 3

这为我解决了问题

在您的 Keystone.js 文件中

添加这行代码

Keystone.init({
'cors allow origin': true,
'cors allow methods': true,
 'cors allow headers': true,
})

在 index.js 文件中

添加这行代码

app.get('/api/stuff/', [keystone.middleware.api, keystone.middleware.cors], routes.api.stuff.list);

到你所有的 api 路由