Ember.js Ember通过链接呈现html,但通过在浏览器中键入url呈现json

Ember.js Ember通过链接呈现html,但通过在浏览器中键入url呈现json,ember.js,Ember.js,这在开发过程中不会在本地发生,但在部署到Heroku之后,如果我导航到我的应用程序的根页面,它会很好地加载,如果我单击“posts”链接,它会以html加载我的所有帖子。但是,如果我通过在浏览器的url输入中键入url来导航到同一页面,或者即使我只是单击刷新按钮,它也会加载json而不是html。检查请求时,我发现它没有发送任何查询参数(因此json没有分页),请求头中也没有内容类型 更新 我尝试在rails中使用“api”命名路由,并在ember中更新config/environment.js

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

更新

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

名称空间对我来说并不重要,我只是认为它可能会有所帮助。但也许它揭示了我的根本问题是什么

此外,我发现了这个问题,它似乎与我的问题非常相似,因此我将发布一些相关代码:

// 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"
      ]
    });
  }
});
更新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

这听起来像是web服务器(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;
        }
}
在这个配置中,
位置
部分非常重要。如果请求的路径不是文件,它指示nginx提供
index.html
。然后,Ember的路由器将解析url并呈现正确的路由


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

这听起来像是web服务器(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;
        }
}
在这个配置中,
位置
部分非常重要。如果请求的路径不是文件,它指示nginx提供
index.html
。然后,Ember的路由器将解析url并呈现正确的路由


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

嗯,我从来没有真正想出解决这个问题的一般方法。我相信问题在于Rails(特别是路由器),而不是服务器,但我可能错了。是什么让我相信这是灰烬指南中的这一点,特别是:

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


我认为,在我的例子中,指南中的“服务器”意味着我的rails api。无论如何,我最终解决这一问题的方法是在ember cli rails gem和相应的ember cli rails插件上实现的,它基本上抽象了这两个框架的许多配置,以便彼此协作,并且作为一个额外的功能,它与Heroku很好地集成,便于部署。我本想在没有魔法插件的情况下解决这个问题,但不管怎样。它现在可以工作了。

嗯,我从来没有真正想出解决这个问题的普通方法。我相信问题在于Rails(特别是路由器),而不是服务器,但我可能错了。是什么让我相信这是灰烬指南中的这一点,特别是:

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


我认为,在我的例子中,指南中的“服务器”意味着我的rails api。无论如何,我最终解决这一问题的方法是在ember cli rails gem和相应的ember cli rails插件上实现的,它基本上抽象了这两个框架的许多配置,以便彼此协作,并且作为一个额外的功能,它与Heroku很好地集成,便于部署。我本想在没有魔法插件的情况下解决这个问题,但不管怎样。现在它可以工作了。

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

如果你把它们捆绑在一起,你的rails后端不仅要负责API的服务,还要负责ember应用的服务。这意味着所有余烬文件(
js
css
)都将由rails作为静态资产提供


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

这里非常重要的问题是你是如何将你的应用部署到heroku的。 如果您在部署之前绑定了后端(rails API)和前端(ember应用程序)

如果你把它们捆绑在一起,你的rails后端不仅要负责API的服务,还要负责ember应用的服务。这意味着所有余烬文件(
js
css
)都将由rails作为静态资产提供


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

我不知道如何编辑web服务器的co