如何设置 angular2 应用程序以便它可以访问本地休息服务？答案

【问题标题】：How to set an angular2 app up so that it can access a local rest service?如何设置 angular2 应用程序以便它可以访问本地休息服务？
【发布时间】：2016-12-11 16:45:41
【问题描述】：

我有一个 angular2 应用程序，我想连接到使用 Spring Boot 构建的本地休息服务。我希望能够在自己的端口上运行其余服务，然后在不同的端口上运行 angular2 应用程序，但能够对其余服务进行 http 调用。我使用邮递员测试了休息服务，休息服务似乎按预期运行。

如何设置一个 angular2 应用程序，以便它可以对本地 rest 服务进行 http 调用？

当我在我的 angular2 应用程序中使用此代码时，我收到一个对我来说没有意义的错误。这是代码。

在 app.component 中

var data={data:"hi from angular2"};
var api="apikey";
this.ghttp.sendJson(data,api)
  .subscribe((res)=>{
    console.log(JSON.stringify(res));
  });

在 Http 服务中

  sendJson(jsonData, apiKey){
    var localhost= "http://127.0.0.1:8080/";
    var mail = "email";
    const headers = new Headers();
    var body = JSON.stringify(jsonData);
    var url = localhost+mail;
    console.log(url);
    headers.append("api-key",apiKey);
    headers.append("Content-Type", "application/json");

    return this.http
      .post(url, body, {headers:headers} )
      .map((res:Response)=> res.json() );

  }

这是我得到的错误：

[错误] 例外：./AppComponent 类 AppComponent_Host 中的错误 - 内联模板：0:0 原因：响应状态：500 内部 URL 的服务器错误：null g（脚本元素 1:68:175）handleError (main.bundle.js:61731) (匿名函数) (main.bundle.js:28298) onInvoke (main.bundle.js:30637) 运行 (main.bundle.js:115785) （匿名函数）（main.bundle.js:116173）invokeTask (main.bundle.js:115936) onInvokeTask (main.bundle.js:30628) invokeTask (main.bundle.js:115935) runTask (main.bundle.js:115825) drainMicroTaskQueue (main.bundle.js:116072) promiseReactionJob

错误信息中也有这一行

"无法解析 url 'http://127.0.0.1:8080/email'；原错误： undefined 不是对象（正在评估 'collectionName.split'）"

如上所述，我可以使用邮递员为地址“http://127.0.0.1:8080/email”创建一个请求，它可以正常工作，但是 angular2 应用程序在向该地址发出请求时会引发上述错误。

对如何实现这项工作有任何想法吗？

【问题讨论】：

服务器日志文件长什么样子？
感谢您的回复...这是一个springboot项目，我还没有将其配置为登录到文件，因此它只是登录到IDE的控制台，没有任何内容记录到控制台在 IDE 中。唯一记录的是浏览器控制台的上述消息。

标签： angular spring-boot jax-rs

【解决方案1】：

经过一些研究，我意识到有几个问题会影响这一点。第一个是 InMemoryWebApi。虽然我遵循文档In memory webapi docs 并在 app.module.ts InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}) 中添加了该行，但似乎这阻止了对本地休息服务的访问，但允许我的应用程序访问谷歌地图 api。一旦我弄清楚了这一点，我就会遇到另一个与跨域请求相关的错误。我发现这个 SO 链接很有用 See this to allow cross domain access for an angular2/jaxrs app，用于配置我的 jaxrs 服务以便能够接受来自 angular2 应用程序的请求。你可以添加一个函数我的一个 JAX 资源类实现了 ContainerResponseFilter 然后我有一个这样的方法......

@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext cres) throws IOException {
    cres.getHeaders().add("Access-Control-Allow-Origin", "http://localhost:4200");
    cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization, api-key, employeeId");
    cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
    cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    cres.getHeaders().add("Access-Control-Max-Age", "1209600");
    cres.getHeaders().add("Access-Control-Max-Age", "1209600");
}

【讨论】：