Ember 通过链接呈现 html，但通过在浏览器中输入 url 呈现 json

Question

这不会在本地开发中发生，但是在部署到 Heroku 之后，如果我导航到我的应用程序的根页面，它会很好地加载，如果我单击“帖子”链接，它会以 html 格式加载我的所有帖子。但是，如果我通过在浏览器的 url 输入中键入 url 导航到同一页面，或者即使我只是单击刷新按钮，它也会加载 json 而不是 html。检查请求，我发现它没有发送任何查询参数（因此 json 没有分页），并且请求标头中没有 Content-Type。

更新

我尝试使用“api”在 rails 中命名我的路线，并在 ember 中更新 config/environment.js 中的 apiURL。现在，就像上面一样，如果我单击链接，它可以正常工作，但如果我键入 url 或刷新，但现在没有加载 json，没有加载任何内容，并且后端的错误是 No route matches [GET] "/posts"。所以我猜 ember 中的 link_to 没有在 url 中插入“api”

命名空间对我来说并不重要，我只是认为它可能会有所帮助。但也许它揭示了我对某人的根本问题？

另外，我发现了这个EMBER direct route URL access dont load data，它似乎与我的问题非常相似，所以我将发布一些相关代码：

// routes/posts.js
import Route from '@ember/routing/route';

export default Route.extend({
  queryParams: {
    page: {
      refreshModel: true
    },
    limit: {
      refreshModel: true
    }
  },

  model(params) {
    return this.store.query('post', {
      filter: {
        name: "categories.name",
        op: "!=",
        val: "Projects"
      },
      limit: params.limit,
      page: params.page,
      includes: [
        "tags",
        "categories"
      ]
    });
  }
});

// routes/post.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    return this.store.findRecord('post', params.post_id);
  }
});

更新 2

这是我的 Rails 的路线文件

# config/routes.rb
Rails.application.routes.draw do
  namespace :api do
    resources :categories
    resources :comments
    resources :posts
  end

  get "*path", :to => redirect("index.html")
end

Answer 1

这听起来像是网络服务器（nginx 或你在 heroku 上使用的任何东西）配置的问题 - 它返回 API 响应而不是服务前端应用程序。

我可以举一个 ember 应用的正确 nginx 配置示例：

server {
    listen 80;
    server_name jira-stats.domain;
    return 301 https://$host$request_uri;
}

server {
        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/jira-stats.domain/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/jira-stats.domain/privkey.pem;
        server_name jira-stats.domain;
        root /path/to/dist;

        location ~ /.well-known {
                allow all;
        }

        # Deny all . files
        location ~ /\. {
                deny all;
        }

        index index.html
        access_log off;
        gzip on;
        gzip_comp_level 9;
        gzip_types text/plain text/xml text/css application/x-javascript image/png image/gif image/jpeg image/jpg;

        location / {
                include /etc/nginx/mime.types;
                try_files $uri /index.html;
        }
}

在这个配置中location 部分非常重要。如果请求的路径不是文件，它指示 nginx 服务index.html。 Ember 的路由器会解析 url 并渲染正确的路由。

您还需要将 API 移动到不同于 80/443 的子域或端口。根据您的问题，我认为前端和后端的 URL 和端口是相同的。

Answer 2

这里非常重要的问题是您如何将应用部署到 heroku。 如果您在部署之前捆绑了后端（您的 Rails API）和前端（您的 ember 应用程序）。

如果您将它们捆绑在一起，您的 rails 后端不仅负责提供 API，还负责提供您的 ember 应用程序。这意味着所有 ember 文件（js、css）都将由 rails 作为静态资产提供服务。

由于 ember 执行客户端站点路由，这意味着您的 rails 后端在遇到带有未知 URL 的 HTTP GET 请求时必须提供 index.html。所以基本上你的index.html 变成了你的404 文件，除了rails 应该总是响应HTTP 200 OK。

Answer 3

好吧，我从来没有真正想出解决这个问题的普通方法。我确实认为问题出在 Rails（特别是路由器）而不是服务器上，但我可能是错的。是什么让我相信这是 Ember 指南中的这一点 https://guides.emberjs.com/release/configuring-ember/specifying-url-type/#toc_history，具体来说：

请记住，您的服务器必须从 Router.map 函数中定义的所有 URL 为 Ember 应用程序提供服务。换句话说，如果您的用户直接导航到 /posts/new，您的服务器必须配置为响应您的 Ember 应用程序。

我认为“服务器”是指，就我而言，指南意味着我的 rails api。无论如何，我最终解决这个问题的方法是发生在 ember-cli-rails gem 和相应的 ember-cli-rails-addon 上，它基本上抽象了这两个框架的许多配置以相互协作，并且作为奖励，它可以与 Heroku 很好地集成，以便于部署。我本来想在没有魔法插件的情况下解决这个问题，但无论如何。现在可以使用了。