量角器中的404，用于已知的非根Angular工作页面

Question

Why does the following code produce a 404 status code for http://localhost:4200/page yet a 200 status code for http://localhost:4200 ?

When Protractor is running I'm able to open up another browser window and type http://localhost:4200/page into the address bar, press enter, and it works. But request in Protractor gives a 404.

import * as Request from 'request';
describe('Link', () => {
  it('should work', async () => {
    const href = 'http://localhost:4200'; // works
    // const href = 'http://localhost:4200/page'; // doesn't work, even though this works outside of Protractor while Protractor is running
    const statusCode = await new Promise<number>((resolve, reject) => {
      Request(href, (error, response, body) => {
        if (error) {
          reject(error);
        } else {
          resolve(response.statusCode);
        }
      });
    });
    if (typeof(statusCode) !== 'number') {
      throw new Error(`Failed to request ${href}`);
    }
    if (statusCode < 200 || statusCode >= 300) {
      throw new Error(`Bad status code ${statusCode} for ${href}`);
    }
  });
});

Here's a complete, minimal, verifiable repro: https://drive.google.com/uc?export=download&id=1S2It1jA1bTR1hUoqdd_QC_Qa6BB3wnDS

1. Run ng serve and navigate to http://localhost:4200/page directly in your browser of choice to observe the page does exist
2. Run npm install then ng e2e to observe failure on http://localhost:4200/page URL
3. Modify the E2E test to delay for a long time so that you can do this:
   1. ng e2e
   2. While Protractor is still running your long delayed test, navigate to http://localhost:4200/page directly in your browser of choice to observe the page does exist while Protractor is running

Note that Git history is included in the zip.

Answer 1

The 404 is from a missing Accept: text/html header. Add that header and you get 200.

As DublinDev pointed out it doesn't work in Postman, either, so it's not specifically a request issue. But it does work in Chrome. That smells like a headers issue. Sure enough, after messing around with headers for a little bit I narrowed it down to this one.

Here's the final product:

const statusCode = await new Promise<number>((resolve, reject) => {
  Request({
    url: href,
    headers: {
      'Accept': 'text/html'
    }
  }, (error, response, body) => {
    if (error) {
      reject(error);
    } else {
      resolve(response.statusCode);
    }
  });
});

So in summary: that header is necessary because the Angular site is hosted by Angular's dev server during E2E tests, and the dev server apparently has this quirk.