Question

我有一个已发布的网站，并且还有一个我正试图从localhost:9000访问的API。这个API是，或者至少我试图访问的部分不要求您以任何形式或形式进行身份验证。

我在骨干中设置了一个核心集合：

AisisBlogger.Collections.AisisCollections = Backbone.Collection.extend({

  id: 0,

  page: 1,

  per: 10,

  route: '',

  tagName: '',

  categoryName: '',

  url: function() {
    var url;

    if (this.id !== 0) {
      url = 'http://writer.aisisplatform.com/api/v1/blogs/' + AisisBlogger.blogId + '/'+this.route+'/' + this.id
    } else if (this.tagName !== '' && this.route === 'posts') {
      url = 'http://writer.aisisplatform.com/api/v1/blogs/' + AisisBlogger.blogId + '/'+this.route+'?tag_name=' + this.tagName + '&page=' + this.page + '&per=' + this.per
    } else if (this.categoryName !== '' && this.route === 'posts') {
      url = 'http://writer.aisisplatform.com/api/v1/blogs/' + AisisBlogger.blogId + '/'+this.route+'?category_name=' + this.categoryName + '&page=' + this.page + '&per=' + this.per
    }else {
       url = 'http://writer.aisisplatform.com/api/v1/blogs/' + AisisBlogger.blogId + '/'+this.route+'?page=' + this.page + '&per=' + this.per
    }

    return url;
  },

  initialize: function(options){
    if (options !== undefined) {
      // Set id
      if (options.id !== undefined) {
        this.id = options.id;
      }

      // Set page
      if (options.page !== undefined) {
        this.page = options.page;
      }

      // Set per page
      if (options.per !== undefined) {
        this.per = options.per;
      }

      // Set the tag Id
      if (options.tagId !== undefined) {
        this.tagName = options.tagName;
      }

      // Set the category Id
      if (options.categoryId !== undefined) {
        this.categoryId  = options.categoryId
      }
    }
  }

});

从这里我有以下收藏：

AisisBlogger.Collections.Posts = AisisBlogger.Collections.AisisCollections.extend({

  route: 'posts'

});

很好，所有内容都排成一列，所以在路线文件中我做了以下调用：

AisisBlogger.Routers.SiteBlog = AisisBlogger.Routers.AisisRouter.extend({

  page: 0,

  routes: {
    '': 'index',
    'post/:id': 'post',
    'posts/tags-archive/:tag': 'tags',
    'posts/categories-archive/:category': 'categories'
  },

  emptyView: function() {
    $('#blog').empty();
  },

  index: function() {
    this.emptyView();
    var postsCollection = new AisisBlogger.Collections.Posts();
    postsCollection.fetch().then(this.postsRecieved, this.serverError);
  },

  ...
}

因此，当我加载应用程序并访问索引路径时，我什么也看不见 - 我打开控制台并看到：

XMLHttpRequest cannot load http://writer.aisisplatform.com/api/v1/blogs/2/posts?page=1&per=10. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

如果您点击链接，则有帖子。有一个json对象为我准备好了。但我似乎无法访问它。根据我的理解，这与跨域有关。所以我已阅读或至少看过关于＆＃34;覆盖骨干同步与跨越来源的文章....＆＃34;但出于身份验证的原因，他们都希望这样做。这只是一个GET api，有一个POST，但是你也不需要进行身份验证。

那么解决这个问题的方法是什么？

Answer 1

正如评论者指出的那样，这里的问题是您请求的JSON文件不允许您从其他域访问它。您需要配置服务器以允许来自您的域的请求。

考虑一个例子。说你在夜总会排队。每个人都想进入，但为了确保它不会太拥挤，有一个客人名单。您的名字需要在访客列表中才能进入。在此示例中，俱乐部是服务器，访客列表是CORS配置。如果您的姓名（即您的应用程序的域名）不在访客列表（CORS配置）上，则不允许您进入。没有例外。要将您的姓名添加到访客列表，您需要使用以下语法在服务器上设置标题：

Access-Control-Allow-Origin: (your domain here)

如果你想打开门，让你身上的每个人都可以使用*通配符：

Access-Control-Allow-Origin: *

为了进一步扩展已经紧张的类比，俱乐部可能会有不同的访问级别（常规，VIP等）。在我们的服务器上，这些类型的访问是我们可以用来发出请求的“方法”（GET，POST等）。您可以使用以下语法设置它们：

Access-Control-Allow-Methods: (HTTP methods go here)

这些只是要设置的两个更常见的标题，还有很多其他标题。如何配置您的分会（即服务器）取决于您使用的服务器技术，有关如何在Enable CORS站点执行此操作的更多信息。

骨干的CORS问题

1 个答案: