如何使用我的ember cli App连接我的服务器

Question

我的服务器正在使用端口:3000并且我正在使用节点,在服务器端表达,这在使用curl或REST客户端时工作正常.

ember cli server正在使用port:4200

我在environment.js上添加了此代码,用于将服务器连接到客户端.

contentSecurityPolicy: {
              'default-src': "'none'",
              'script-src': "'self' 'unsafe-inline' 'unsafe-eval'",
              'font-src': "'self'",
              'connect-src': "'self' http://localhost:3000",
              'img-src': "'self'",
              'report-uri':"'localhost'",
              'style-src': "'self' 'unsafe-inline'",
              'frame-src': "'none'"
     }

我的应用程序适配器代码是:

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({
    "host": "http://localhost:3000",
    "namespace": "api"
});

以这种方式运行我的ember服务器 ember服务器--proxy http://127.0.0.1:3000 在控制器上我使用ajax调用:

            $.ajax({
                    type: 'POST',
                    url: '/blog',
                    contentType: 'application/json',
                    data: param,
                    processData: false,
                    success :
              });

它收到错误: POST http:// localhost:4200/blog 500(内部服务器错误)

我做了所有这些,但我不知道为什么它不起作用.如果您有任何想法,请帮助我.

Answer 1

您需要了解两种连接API的方法之间的区别:

代理

您可以使用以下--proxy选项ember-cli将所有未经ember处理的对ember开发服务器的请求代理到您的后端.

这是一种很好的方法,因为从您的应用程序和浏览器的角度来看,您的后端和应用程序位于同一主机上.

如果你这样做,你应该不指定host您的适配器或后端添加到您的CSP配置.

但是,只有在生产中,您才能从后端为您的ember应用程序提供服务.

CORS

连接到后端的另一种方法是直接向另一个来源提出请求.但是这将是CORS请求,因此他们需要在您的后端进行额外配置!

如果您想直接从其他来源获取数据,则在浏览器中登陆您的服务器需要提供额外的HTTP标头(CORS标题).

然而,你应该这样做,只有做到这一点,如果你不从生产的后端服务器提供您的前端.

如果你想使用CORS你应该不指定--proxy标志,当您运行ember serve,但指定host并正确配置您的CSP.

我也提到了,你错过了=你的ember serve电话.

它不是ember server --proxy http://127.0.0.1:3000但是ember server --proxy=http://127.0.0.1:3000!

通常,如果你这样做,ember serve --proxy=http://127.0.0.1:3000那么HTTP AJAX GET调用http://localhost:4200/blog应该返回相同的http://127.0.0.1:3000/blog.

为了测试这个,我建议你使用像这样的HTTP开发客户端.

我假设你也得到了一个HTTP 500 http://127.0.0.1:3000/blog.然后你的后端出了点问题.也许正确的URI是http://127.0.0.1:3000/blogs？这将是余烬的默认值.

如果您直接http://127.0.0.1:3000/blogs从您的ember应用程序进行调用,则如果您不提供CORS标题,则会始终导致错误.