Question

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

我已经完成了所有API端点/路由，并且它们在我的浏览器中完美运行但是当我尝试远程获取数据时，我不断收到同样的错误： XMLHttpRequest无法加载http://localhost:3000/keystone/api/。请求的资源上不存在“Access-Control-Allow-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);

路由/ 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

这已为我解决了问题

在您的 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路线

Answer 3

好的，所以我在这个问题上得到了朋友的指针。

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

可能很明显，但这已经完全消失了。希望这可以帮助有人在同样的问题上挣扎。

Keystone JS CORS

3 个答案: