[BUG] setExtraHTTPHeaders ignores CORS in WebKit/Firefox

[buraksimsekgit]

Context:

• Playwright Version: [1.29.1]
• Operating System: [Mac OS venture 13.1]
• Node.js version: [v16.15.1]
• Browser: [e.g. All, Chromium, Firefox, WebKit]
• Extra: [any specific details about your environment]

Code Snippet

My code:

test.describe(' E2E test', () => {
  test.only('new user', async ({ schedule, page }) => {
    await page.setExtraHTTPHeaders({ "X-GAT-apiEnv": "stage" });
  `);

})();

Describe the bug

I'm trying to run end-to-end tests on my framework. And I have to define
await page.setExtraHTTPHeaders({ "X-GAT-apiEnv": "stage" }); on my each test as I added above.

My problem is; when I try to run tests against Chromium I'm seeing so many errors when I check the console in the dev tools, and some web elements that need to be shown are not appearing at all.

And these are the some of errors I'm seeing in the console when I check dev tools:

Access to XMLHttpRequest at 'URL' from origin 'URL' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

or

Access to XMLHttpRequest at 'URL' from origin 'URL has been blocked by CORS policy: Request header field x-gat-apienv is not allowed by Access-Control-Allow-Headers in preflight response.

Tests are running quite fine with both Firefox and Webkit, but with Chromium, I can't fix this issue. When I remove that setExtraHTTPHeaders it works fine but we must add it to each test.

[mxschmitt]

Can you share a repro with us which we can run locally? It seems like your server does return different CORS headers based on this request header.

[buraksimsekgit]

Thank you very much for your response, Max. I sent you an e-mail so I would be glad If you can check.

[aslushnikov]

(over to Max since he received an e-mail!)

[mxschmitt]

Your repro was very helpful, I spotted an inconsistency in our setExtraHTTPHeaders implementation and how they are treating CORS. That's a minimal repro:

it('should consider CORS', async ({ browser, server, browserName }) => {
  server.setRoute('/api/v1/test', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end();
  });
  const context = await browser.newContext({
    extraHTTPHeaders: { 'X-MY-HEADER': 'FOOBAR' },
  });
  const page = await context.newPage();
  await page.goto(server.EMPTY_PAGE);
  await page.evaluate(async url => fetch(url), server.CROSS_PROCESS_PREFIX + '/api/v1/test');
  await context.close();
});

which passes in Firefox/WebKit but fails in Chromium. Will talk with the team later about it.

It's about the following request: https://maps.googleapis.com/maps/api/geocode/json.

As a workaround you can do the following in your config:

    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        launchOptions: {
          args: ['--disable-web-security'],
        }
      },
    },

[buraksimsekgit]

Hello Max,

I am glad that the information provided was helpful, as I had recommended using Playwright in my company, and it's become a fantastic tool of mine to use. Thank you, and all the team for your hard work on it and for providing a walkaround to my configuration. My appreciation for your attention to this matter.

Best regards