node.js - Connecting React Production build with Express Gateway

Question

Our React Development build runs flawless with Express Gateway setup on localhost. After build React for production and when we run serve -s build login page comes as it is the entry point of the app. It gets 200 ok response when we put sign-in credential. But when we looked into it we can see the request to server was not successful cause token it saves to browser application is undefined and we checked the response, It is "You need to enable javascript...". JS is enabled no doubt. I have checked By using

axios.post('http://localhost:8080/api/v1/auth/sign-in', userData)

It works fine but when setup proxy: axios.post('/auth/sign-in', userData) react doesn’t run Here is the part of yml for express gateway setup:

http:
port: 8080
apiEndpoints:
 auth-service:
  host: "*"
  paths: ["/api/v1/auth/*", "/api/v1/auth"]
 mail-service:
  host: "*"
  paths: ["/api/v1/mail/*", "/api/v1/mail"]
serviceEndpoints:
 auth-service-endpoint:
  url: http://localhost:3003/
 mail-service-endpoint:
  url: http://localhost:3005/
policies:
 - proxy
pipelines:
 auth-service-pipeline:
  apiEndpoints:
   - auth-service
  policies:
   - proxy:
      action:
        serviceEndpoint: auth-service-endpoint
        changeOrigin: true
        stripPath: true
  mail-service-pipeline:
   apiEndpoints:
    - mail-service
   policies:
    - proxy:
      action:
        serviceEndpoint: mail-service-endpoint
        changeOrigin: true
        stripPath: true

I put the setupProxy.js on src directory of React:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(createProxyMiddleware('/api/v1', 
    { target: 'http://localhost:8080',
     secure: false,
     changeOrigin: true,
    // pathRewrite: {
    //   "^/api": "/api/v1",
    // }
}
));

}

Currently everything is on same machine. We are not using docker. The application runs on Dev environment but shows 200 ok response in production build Any help will be appreciated.

[Edit]

krypton:admin-dashboard-server hasan$ curl -v http://localhost:3001/find_all_services/1/10
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 3001 (#0)
> GET /find_all_services/1/10 HTTP/1.1
> Host: localhost:3001
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< X-DNS-Prefetch-Control: off
< X-Frame-Options: SAMEORIGIN
< Strict-Transport-Security: max-age=15552000; includeSubDomains
< X-Download-Options: noopen
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Content-Type: application/json; charset=utf-8
< Content-Length: 1833
< ETag: W/"729-LM91B3vCUrbvesBrp32ykiXXkQo"
< Date: Tue, 12 Jan 2021 14:57:24 GMT
< Connection: keep-alive
< 
* Connection #0 to host localhost left intact
[{"id":1,"name":"Laser Hair Remove"},
 {"id":2,"name":"Facial Treatments"}
]

krypton:admin-dashboard-server hasan$ curl -v 
http://localhost:8080/api/v1/services/find_all_services/1/10
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /api/v1/services/find_all_services/1/10 HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< access-control-allow-origin: *
< x-dns-prefetch-control: off
< x-frame-options: SAMEORIGIN
< strict-transport-security: max-age=15552000; includeSubDomains
< x-download-options: noopen
< x-content-type-options: nosniff
< x-xss-protection: 1; mode=block
< content-type: application/json; charset=utf-8
< content-length: 1833
< etag: W/"729-LM91B3vCUrbvesBrp32ykiXXkQo"
< date: Tue, 12 Jan 2021 15:03:45 GMT
< connection: keep-alive
< 
* Connection #0 to host localhost left intact
[{"id":1,"name":"Laser Hair Remove"},
 {"id":2,"name":"Facial Treatments"}
]


krypton:admin-dashboard-server hasan$ curl -v -H "Content-Type: application/json" -X POST -d 
'{"email":"[email protected]","password":"safe123"}' 
http://localhost:8080/api/v1/auth/sign-in
Note: Unnecessary use of -X or --request, POST is already inferred.
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> POST /api/v1/auth/sign-in HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> Content-Type: application/json
> Content-Length: 52
> 
* upload completely sent off: 52 out of 52 bytes
< HTTP/1.1 200 OK
< access-control-allow-origin: *
< x-dns-prefetch-control: off
< x-frame-options: SAMEORIGIN
< strict-transport-security: max-age=15552000; includeSubDomains
< x-download-options: noopen
< x-content-type-options: nosniff
< x-xss-protection: 1; mode=block
< content-type: application/json; charset=utf-8
< content-length: 270
< etag: W/"10e-S+kd8b4Yfl7un04FVGe3MFLFEaY"
< date: Tue, 12 Jan 2021 15:40:12 GMT
< connection: keep-alive
< 
* Connection #0 to host localhost left intact
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhbGdvcml0aG0iOiJIUzI1N"

krypton:admin-dashboard-server hasan$ curl -v -H "Content-Type: application/json" -X POST -d '{"email":"[email protected]","password":"safe123"}' http://localhost:3003/sign-in
Note: Unnecessary use of -X or --request, POST is already inferred.
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 3003 (#0)
> POST /sign-in HTTP/1.1
> Host: localhost:3003
> User-Agent: curl/7.54.0
> Accept: */*
> Content-Type: application/json
> Content-Length: 52
> 
* upload completely sent off: 52 out of 52 bytes
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< X-DNS-Prefetch-Control: off
< X-Frame-Options: SAMEORIGIN
< Strict-Transport-Security: max-age=15552000; includeSubDomains
< X-Download-Options: noopen
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Content-Type: application/json; charset=utf-8
< Content-Length: 270
< ETag: W/"10e-LW/1l5fXf5BaiF3KJMvG60xRthE"
< Date: Tue, 12 Jan 2021 15:45:33 GMT
< Connection: keep-alive
< 
* Connection #0 to host localhost left intact
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhbGdvcml0aG0i"

question from:https://stackoverflow.com/questions/65646390/connecting-react-production-build-with-express-gateway

Answer 1

Waitting for answers