Puppeteer cors mistake

Question

hello i have problem in my code using puppeteer, cors error happens randomly but in 80% of my tests. Here is my code thanks for help.Btw the server respond is

Access to fetch at 'https://secure-store.nike.com/eu/services/jcartService/?action=addItem&rt=json&country=GB&region=eu&lang_locale=en_GB&catalogId=1&productId=12238990&qty=1&skuId=21502246' from origin 'https://www.nike.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const puppeteer = require('puppeteer');
const jsonfile = require('jsonfile')

function evaluate_click(element,page){
  page.evaluate((el) => {
     el.click()
  },element);
}

async function bot(){
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage()
setTimeout(function(){
    browser.close()
},120000)
await page.goto('https://www.nike.com/gb/launch/t/air-max-deluxe-midnight-navy-laser-orange-persian-violet/')
await page.waitForSelector('button.ncss-btn-accent.ncss-brand.pt3-sm.pb3-sm.pt2-lg.pb2-lg.u-uppercase.ta-sm-c.u-full-width')
await page.click('button.ncss-btn-accent.ncss-brand.pt3-sm.pb3-sm.pt2-lg.pb2-lg.u-uppercase.ta-sm-c.u-full-width')
await page.waitFor(1000)
await page.waitForSelector('button[aria-haspopup="true"]')
await page.click('button[aria-haspopup="true"]')
await page.waitForXPath("//ul[contains(@class,'')]//li[11]//button[1]")
var select_size = await page.$x("//ul[contains(@class,'')]//li[11]//button[1]")
await evaluate_click(select_size[0],page)
await page.waitFor(1000)
await page.waitForSelector('button.ncss-brand.ncss-btn-black.pb3-sm.prl5-sm.pt3-sm.u-uppercase.u-full-width')
await page.click('button.ncss-brand.ncss-btn-black.pb3-sm.prl5-sm.pt3-sm.u-uppercase.u-full-width')
await page.waitForSelector('a[data-qa="checkout-link"]')
await page.click('a[data-qa="checkout-link"]')

}

bot()

Solution 1

You can pass the --disable-web-security flag to puppeteer.launch() to disable web security:

const browser = await puppeteer.launch({
  args: [
    '--disable-web-security',
  ],
  headless: false,
});

Solution 2

Nowadays these flags are needed:

"--disable-features=IsolateOrigins", "--disable-site-isolation-trials"

await puppeteer.launch({
    headless: headless,
    devtools: true,
    args: [
        '--disable-web-security',
        '--disable-features=IsolateOrigins',
        '--disable-site-isolation-trials'
    ]
});

Also make sure you have a recent version of puppeteer, since it crashes with these flags in [email protected].

You can check that isolation is disabled in: chrome://process-internals

Suggested in https://stackoverflow.com/a/51320323/337587

More information on the flag: https://www.chromium.org/Home/chromium-security/site-isolation

Solution 3

When Chrome 94 started to enforce "Private Network Access" (CORS-RFC1918) we had problems with "public" networks accessing both "private" and "local" networks, resulting in CORS errors.

What worked for us was adding --disable-features=BlockInsecurePrivateNetworkRequests.

Comments

[james]

Nowadays there's more flags needed, see my answer in this thread

[Tahir Afridi]

Hello Grant Miller, can we do it with headless: true? on my local machine its working fine, but when I deploy my code to live server, its not working with false flag, i m using this end point to fetch instagram users instagram.com/web/search/topsearch/… when i try with screenshot, i see error page in the screenshot, but in localhost its working great. thnx.

[Theo]

Thank you for this updated list of flags. Using only --disable-web-security did not work for me in the (at time of writing) latest version of Chrome, and I had to use the flags you suggested here as well. Thanks.

[casolorz]

Is there a fix for when you can't use that kind of a switch? Like if the server returns some sort of headers?