Generator-jhipster: Ionic is not communicating with microservice

[uouo690]

Hello ,

I am using ionic , microservice , and JWT authentication.
Every thing is working as it should be in local environment, when pushing the application to production ,I had to edit cors section in the gateway application, I managed to successfully login and get account information, and both called from the gateway.

http://productionUrl:8080/api/authenticate  return the expected response which contains token.
http://productionUrl:8080/api/account       return the expected response.

The issue happens when I tried to call microservice entity manipulation ,as follows :
When getting the list of entities there is no error, "Status code: 200 Ok" , but the response is strange as I get this jhipster html error message in the response payload.

---

`

.
.

An error has occurred :-(

Usual error causes

1. You started the application from an IDE and you didn't run style="color:red">npm start or npm run webpack:build.
   


2. You had a network error while running npm install. If you are
   behind a corporate proxy, it is likely that this error was caused by your proxy. Have a look at
   the JHipster error logs, you will probably have the cause of the error.


3. You installed a Node.js version that doesn't work with JHipster: please use an LTS (long-term
   support) version, as it's the only version we support.

Building the client side code again

If you want to go fast, run ./mvnw to build and run everything.

If you want to have more control, so you can debug your issue more easily, you should follow the
following steps:

1. Install npm dependencies with the command npm install


2. Build the client with the command npm run webpack:build or style="color:red">npm start


3. Start the server with ./mvnw or using your IDE

Getting more help

If you have a question on how to use JHipster

Go to Stack Overflow with the target="_blank">"jhipster" tag.

If you have a bug or a feature request

First read our target="_blank">contributing guidelines.

Then, fill a ticket on our href="https://github.com/jhipster/generator-jhipster/issues/new/choose" target="_blank">bug
tracker, we'll be happy to resolve your issue!

If you want to chat with contributors and other users

Join our chat room on target="_blank">Gitter.im. Please note that this is a public chat room, and that we expect
you to respect other people and write in a correct English language!

`

---

I want to indicate this is the response of microservice -not a gateway- .

The request is as follows

get http://productionUrl:8080/service/project/api/projects
Host: productionUrl:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101
Firefox/68.0
Accept: application/json, text/plain, /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8100/tabs/entities/project
Origin: http://localhost:8100
Connection: keep-alive`

When trying to post entity , I face this error

{
"type":"https://www.jhipster.tech/problem/problem-with-message",
"title":"Method Not Allowed",
"status":405,"detail":"Request method 'POST' not supported",
"path":"/service/project/api/projects","message":"error.http.405"
}

request send as follows

Method URL
POST http://productionUrl:8080/service/project/api/projects

Request Headers

Host: productionUrl:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
Accept: application/json, text/plain, /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8100/tabs/entities/project/new
Content-Type: application/json
Content-Length: 51
Origin: http://localhost:8100
Connection: keep-alive

Request Body

{"name":"test","address":"test","logo":"test"}

I added cors to gateway's 'application-prod.yml' , as follows

jhipster:
cors:
allowed-origins: ''
allowed-methods: ''
allowed-headers: '*'
exposed-headers: 'Authorization,Link,X-Total-Count'
allow-credentials: true
max-age: 1800
http:
cache: # Used by the CachingHttpHeadersFilter
timeToLiveInDays: 1461
security:
authentication:
jwt:
# This token must be encoded using Base64 and be at least 256 bits long (you can
.
.
.

Overview of the issue

Simply the cors enabled in production let me authentication and get account info.
When calling microservice , when calling get resources - list of entities- I got the strange html jhipster error.
When calling post I get "Request method 'POST' not supported".

Motivation for or Use Case

Coz I can't call microservice services.

Reproduce the error

1- create gateway with jwt authentication.
2- create microservices

Related issues

9906

Suggest a Fix

I think cors enable work fine for the gateway and don't for the microservice , I added

source.registerCorsConfiguration("/service/**", config);

in WebConfigurer in the gateway , but didn't do any difference.

JHipster Version(s)

v6.1.2

JHipster configuration

I think this is not required in my case.

Browsers and Operating System

chrome and firefox , ionic serve.

Azure Aks as cluster in production.

[ruddell]

You are using /service/ as the prefix, but the gateway proxies to microservices using /services/ (plural).

[uouo690]

Hi ruddell ,

I am using the ionic jhipster generator , so I didn't think for a minute that this could happen.
I wasted a whole day coz of this letter :D :D :D

Any way I had to use '@CrossOrigin( origins = "*" )' on micro-service apps rest controllers ,other wise it was giving forbidden status.

thanks for your help

[mraible]

@uouo690 I fixed the "services" problem in Ionic for JHipster in the latest release (4.0.2). Specifically, this commit.

You're the 2nd one to report an issue for CORS, so I'll merge https://github.com/jhipster/generator-jhipster/pull/9906.

[uouo690]

@mraible I afraid to tell you that I am the other one as well. 😄
Thank you for your hard work , and the awesome ionic generator.