axios gives me a CORS error, fetch doesn't. Why is that?

NODE

import axios from 'axios';
let res = await axios('https://example-29544e.webflow.io').catch((err) => {
  console.error(err);
});
console.log(res);

import axios from 'axios';
let res = await axios('https://example-29544e.webflow.io').catch((err) => {
  console.error(err);
});
console.log(res);

Access to fetch at 'https://example-29544e.webflow.io/' from origin 'http://127.0.0.1:5173' 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. fetcher.js?v=36de8185:44 GET https://example-29544e.webflow.io/ net::ERR_FAILED 200

DENO

try {
  const res = await fetch('https://example-29544e.webflow.io');
  console.log(await res.text());
} catch (error) {
  console.log(error);
}

try {
  const res = await fetch('https://example-29544e.webflow.io');
  console.log(await res.text());
} catch (error) {
  console.log(error);
}

This seems to fetch the data just fine. Interestingly, using the above approach in Node produces another CORS error. I'm confused

try {
  const res = await fetch('https://example-29544e.webflow.io');
  console.log(await res.text());
} catch (error) {
  console.log(error);
}

try {
  const res = await fetch('https://example-29544e.webflow.io');
  console.log(await res.text());
} catch (error) {
  console.log(error);
}

45 Replies

Unknown User•3y ago

Message Not Public

beermanOP•3y ago

Is there any way to ignore cors in node fetch?

Unknown User•3y ago

Message Not Public

beermanOP•3y ago

Then how do people usually fetch the data in those sort of scenarios?

Unknown User•3y ago

Message Not Public

Moomoo•3y ago

Maybe you can manually set the Origin header to a value the server will accept, IDK if fetch lets you do that.

beermanOP•3y ago

I will try the sveltekit deno adapter and see if I can get it to work there Quick question, I just created a demo project with deno init added index.html and added the main.ts to the html head via <script src="main.ts"></script> but I can't seem to get it to work. I keep getting Refused to execute script from 'http://127.0.0.1:5500/main.ts' because its MIME type ('video/mp2t') is not executable. in console. What am I doing wrong? the dev server was started using the vsc extension live server

Unknown User•3y ago

Message Not Public

beermanOP•3y ago

It keeps telling me that document is not defined

error: Uncaught (in promise) ReferenceError: document is not defined const el = (document.querySelector('body').innerHTML = bodyContent)

import * as cheerio from 'https://esm.sh/v97/cheerio@1.0.0-rc.12/es2022/cheerio.js'

const res = await fetch('https://example-29544e.webflow.io')
const html = await res.text()

const $ = cheerio.load(html)
const headContent = $(`head`).html()
const bodyContent = $(`body`).html()

const el = (document.querySelector('body').innerHTML = bodyContent)

import * as cheerio from 'https://esm.sh/v97/cheerio@1.0.0-rc.12/es2022/cheerio.js'

const res = await fetch('https://example-29544e.webflow.io')
const html = await res.text()

const $ = cheerio.load(html)
const headContent = $(`head`).html()
const bodyContent = $(`body`).html()

const el = (document.querySelector('body').innerHTML = bodyContent)

and in console

Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

axios gives me a CORS error, fetch doesn't. Why is that?

Did you find this page helpful?