Как установить приложение angular2, чтобы он мог получить доступ к локальному сервису отдыха?

Question

У меня есть приложение angular2, которое я хочу подключить к местному сервису отдыха, построенному с весенним ботинком. Я хочу, чтобы иметь возможность запускать сервис отдыха на своем собственном порту, а затем приложение angular2 на другом порту, но иметь возможность сделать http-звонки на оставшуюся службу. Я использую почтальона для тестирования службы отдыха, а служба останова работает как и ожидалось.

Как настроить приложение 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()); 

    } 

Это ошибка, я получаю:

[Error] EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: Response with status: 500 Internal Server Error for URL: null g (Script Element 1:68:175) handleError (main.bundle.js:61731) (anonymous function) (main.bundle.js:28298) onInvoke (main.bundle.js:30637) run (main.bundle.js:115785) (anonymous function) (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

Существует также эта строка в сообщении об ошибке

"unable to parse url ' http://127.0.0.1:8080/email '; original error: undefined is not an object (evaluating 'collectionName.split')"

Как уже упоминалось, я могу создать запрос с почтальоном по адресу «http://127.0.0.1:8080/email», и он работает, просто отлично, но приложение angular2 выдает указанную выше ошибку при обращении к этому адресу.

Любые идеи о том, как сделать эту работу?

Answer 1

После некоторого исследования я понял, что есть пара проблем, влияющих на это. Первым был InMemoryWebApi. В то время как я следил за документами In memory webapi docs и добавил строку в app.module.ts InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), похоже, что это блокировало доступ к локальному сервису отдыха, но позволяло моему приложению получать доступ к картам Google 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"); 
}