Hit is not going to API server .

[agujral1]

Hi @ncrum I am facing 400 bad request at client side.Perform below steps on site 1 yarn 2 yarn develop API server is running successfully and all rest endpoint working fine . But when we try to access API from site , Hit is not going to api server running on 8082 . I checked all API end points using swagger and making my dummy js application to render data from API , its working fine .

But from site application , api is not accessible .

Please check below screenshot .

[ncrum]

@agujral1 The NodeJS server essentially serves as a proxy to the API server. If you look in either of the server files, webpack-server.js or server.js, you will see a line of code similar to this:

app.use('/api', proxy(process.env.API_HOST, {
    preserveHostHdr: true,
    forwardPath : function(req) {
        return path.join(process.env.API_CONTEXT_PATH, req.url)
    }
}));

Try changing the API_HOST to point towards localhost rather than what it is defaulted to right now.

[ncrum]

I just checked and it should be already pointing to localhost:8082

[ncrum]

This should result in a proxy to the api server.

[ncrum]

Did you change the context path for the API server or anything? By default is should be /api/v1/. If you can do a wget or curl to http://localhost:8082/api/v1/customer/current and it works, it should be working here.

[agujral1]

Hi @ncrum I started API server in debug mode , its working fine . Did Curl to server - Working fine , hit is coming to debug point at API .

i checked all API with swagger and postman . API is working fine . But from site application , hit is not coming to debug point end giving 400 bad request.

I tried running API on jetty container , result is same (400 bad request and hit did not come but in response content type is different if you will compare it with above screen in my first comment . Please find below screen with jetty .

Apart from that on client side I have changed all files (*.server.js ) and added hard coded proxies like below

app.use('/api', proxy('http://localhost:8082', { preserveHostHdr: true, forwardPath : function(req) { return path.join('/api/v1/', req.url) } })); But this as well did not work.

[agujral1]

Entries in environment files

API_HOST=http://localhost:8082 API_CONTEXT_PATH=/api/v1/ IMAGE_HOST=http://localhost:8082 NODE_ENV=development

[agujral1]

@ncrum

Could you please try running your application again from scratch.

[agujral1]

@ncrum

Kindly post your server files (webpack-server.js or server.js). need to check how you are passing proxy value . I think its not picking from process.env.API_HOST
process.env.API_HOST

[ncrum]

@agujral1 I just did a fresh install and it's working fine for me. One difference may be that you are running on Mac OSX and I on Windows. Not sure why this would be the issue, but it's something to consider when we try to diagnose what's going on.

Do you know if it is actually hit the forwardPath function when you make that request? Perhaps we could put some logging in there. I'm wondering if it is failing at the proxy, or after the proxy directs it to the API server.

[ncrum]

@agujral1 I just pushed out some changes to update express-http-proxy to its latest version. Perhaps that might have an effect, or at least it now has support for some easy trace logging. Pull down the latest and add this line to your config/development.env file:

DEBUG=express-http-proxy

This will enable trace logging so that when you start up and make requests we can see details like this:

express-http-proxy resolved proxy path: /api/v1/customer/current +814ms
  express-http-proxy [start proxy] /cart +13ms
  express-http-proxy { limit: '1mb',
  express-http-proxy   proxyReqPathResolver: [Function: proxyReqPathResolver],
  express-http-proxy   proxyReqOptDecorator: undefined,
  express-http-proxy   proxyReqBodyDecorator: undefined,
  express-http-proxy   userResDecorator: undefined,
  express-http-proxy   userResHeaderDecorator: undefined,
  express-http-proxy   filter: [Function: defaultFilter],
  express-http-proxy   parseReqBody: true,
  express-http-proxy   preserveHostHdr: true,
  express-http-proxy   memoizeHost: true,
  express-http-proxy   reqBodyEncoding: 'utf-8',
  express-http-proxy   skipToNextHandlerFilter: undefined,
  express-http-proxy   headers: undefined,
  express-http-proxy   preserveReqSession: undefined,
  express-http-proxy   https: undefined,
  express-http-proxy   port: undefined,
  express-http-proxy   reqAsBuffer: undefined,
  express-http-proxy   timeout: undefined } +14ms
  express-http-proxy proxy request options: { headers:
   { host: 'localhost:3000',
     'x-locale': 'en-US',
     'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36',
     accept: '*/*',
     referer: 'http://localhost:3000/',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'en-US,en;q=0.9',
     cookie: '_ga=GA1.1.1960013207.1513722469; blLocale=en-US',
     connection: 'close' },
  method: 'GET',
  path: '/cart',
  params: {} } +13ms

[agujral1]

@ncrum

Thanks a lot for your help .

i enabled trace logging . my path is building with back slash . I think that's why its failing . I checked your path its building with forward slash . Chrome handles backword slash but when i did CURL it failed with below curl http://localhost:8082\api\v1\customer\current I am running on window 10 .

method: 'GET', path: '/cart', params: {} } +23ms express-http-proxy resolved proxy path: \api\v1\cart?onlyIfExists=true +17ms express-http-proxy [start proxy] /menu +16ms express-http-proxy { limit: '1mb', express-http-proxy proxyReqPathResolver: [Function: proxyReqPathResolver], express-http-proxy proxyReqOptDecorator: undefined, express-http-proxy proxyReqBodyDecorator: undefined, express-http-proxy userResDecorator: undefined, express-http-proxy userResHeaderDecorator: undefined, express-http-proxy filter: [Function: defaultFilter], express-http-proxy parseReqBody: true, express-http-proxy preserveHostHdr: true, express-http-proxy memoizeHost: true, express-http-proxy reqBodyEncoding: 'utf-8', express-http-proxy skipToNextHandlerFilter: undefined, express-http-proxy headers: undefined, express-http-proxy preserveReqSession: undefined, express-http-proxy https: undefined, express-http-proxy port: undefined, express-http-proxy reqAsBuffer: undefined, express-http-proxy timeout: undefined } +17ms express-http-proxy proxy request options: { headers: { host: 'localhost:3000', 'x-locale': 'en-US', 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36', accept: '/', referer: 'http://localhost:3000/', 'accept-encoding': 'gzip, deflate, br', 'accept-language': 'en-US,en;q=0.9', cookie: 'blLocale=en-US', 'if-none-match': 'W/"71f6-df5ZLntLvTXp5AXonYhKZAd7kMo"', connection: 'close' },

[agujral1]

@ncrum Thanks a lot for your help . It worked finally . After replacing all backslach with forward , its working fine for me now

i added replace method as below changes in webpak-server.js

app.use('/api', proxy(process.env.API_HOST, { preserveHostHdr: true, proxyReqPathResolver : function(req) {

    return path.join(process.env.API_CONTEXT_PATH, req.url)**.replace(/\\/g,"/")**
}

}));

[ncrum]

Ah that is a good catch. I did not realize that path.join would convert / to \ on Windows! It looks like using path.posix.join would work as expected. I'm going to make some changes to make this more environment agnostic.

[ncrum]

This should now be fixed as of the last commit. Let me know if it doesn't work for some reason.