Question

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

如何设置angular2应用，以便它可以对本地休息服务进行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() );

  }

这是我得到的错误：

[错误] EXCEPTION：./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

错误消息中还有这一行

＆＃34;无法解析网址＆＃39; http://127.0.0.1:8080/email＆＃39;原始错误： undefined不是一个对象（评估＆＃39; collectionName.split＆＃39;）＆＃34;

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

有关如何使这项工作的任何想法？

Answer 1

经过一番研究后，我发现有一些问题会影响到这一点。第一个是InMemoryWebApi。当我按照文档In memory webapi docs并在app.module.ts InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true})中添加该行时，似乎这阻止了对本地休息服务的访问，但允许我的应用访问google maps 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");
}

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

1 个答案: