beerman
beerman•2y ago

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);
}
44 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
beerman
beerman•2y ago
Is there any way to ignore cors in node fetch?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
beerman
beerman•2y ago
Then how do people usually fetch the data in those sort of scenarios?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
beerman
beerman•2y 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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
beerman
beerman•2y 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)
Doctor 🤖
Doctor 🤖•2y ago
Put type="module" on your script tag.
beerman
beerman•2y ago
Thanks, that has gotten of the import error, but document is still undefined
Doctor 🤖
Doctor 🤖•2y ago
This is in the browser yes?
beerman
beerman•2y ago
no, when I run deno run --allow-write --allow-net main.js
Doctor 🤖
Doctor 🤖•2y ago
Document isn’t defined in deno. It gives you type information but there is no document in deno. Unlike a html page which is a document.
beerman
beerman•2y ago
beerman
beerman•2y ago
So how does one interact with the dom?
Doctor 🤖
Doctor 🤖•2y ago
There is no dom in deno.
beerman
beerman•2y ago
So deno is not meant to be used as a node replacement for web development?
Doctor 🤖
Doctor 🤖•2y ago
The webpage has a dom. The deno instance doesn’t.
beerman
beerman•2y ago
right, but I can't even access the dom like i would in js document.querySelector and so on
Doctor 🤖
Doctor 🤖•2y ago
If you want to access the webpage you load the index.html and it calls the main.js and runs that in the browser.
beerman
beerman•2y ago
That's what I did ^ but it's not even logging the element
Doctor 🤖
Doctor 🤖•2y ago
Because you have other errors which broke the rest from running.
beerman
beerman•2y ago
I thought that Deno ignores cors
Doctor 🤖
Doctor 🤖•2y ago
Deno does. Your web browser doesn’t.
beerman
beerman•2y ago
I'm able to log the response to my terminal, but browser breaks.
Doctor 🤖
Doctor 🤖•2y ago
You loading the index.html is completely seperate from deno. These are two seperate instances of JavaScript running.
beerman
beerman•2y ago
How do I get the browser to shut up and just do what i need it to deno get the data and then put it into the html content of the element
Doctor 🤖
Doctor 🤖•2y ago
You’ll need to make deno into a web server to serve the html to the client (your browser) instead of opening the index.html file manually. That way you can then do fetches to deno from the client to get whatever you want.
beerman
beerman•2y ago
Is there a tutorial for this? you mean using serve?
Doctor 🤖
Doctor 🤖•2y ago
I haven’t used it myself but yes
beerman
beerman•2y ago
lol what the hell
import { serve } from 'https://deno.land/std@0.119.0/http/server.ts'
import * as cheerio from 'https://esm.sh/v97/cheerio@1.0.0-rc.12/es2022/cheerio.js'

function handler(_req: Request): Response {
return new Response('Hello, World!')
}
console.log('Listening on http://localhost:8000')
serve(handler)
import { serve } from 'https://deno.land/std@0.119.0/http/server.ts'
import * as cheerio from 'https://esm.sh/v97/cheerio@1.0.0-rc.12/es2022/cheerio.js'

function handler(_req: Request): Response {
return new Response('Hello, World!')
}
console.log('Listening on http://localhost:8000')
serve(handler)
the page is just serving the text in the response and ignores my index.html
Doctor 🤖
Doctor 🤖•2y ago
You didn’t send your index.html. You sent "Hello, World!"
beerman
beerman•2y ago
the doc doesn't say how to
Doctor 🤖
Doctor 🤖•2y ago
Looking at the docs you need to pass new Response a BodyInit which accepts a Blob, BufferSource, FormData, URLSearchParams, ReadableStream<Uint8Array>, or a string. So you’ll need to open the index.html file in deno and send it in the response.
Doctor 🤖
Doctor 🤖•2y ago
You can open a file with Deno.open and turn it into a ReadableStream<Uint8Array> with .readable.
beerman
beerman•2y ago
This is terrible and not at all beginner friendly. I'm just gonna use fresh
Doctor 🤖
Doctor 🤖•2y ago
¯\_(ツ)_/¯
new Response((await Deno.open('./index.html')).readable)
new Response((await Deno.open('./index.html')).readable)
beerman
beerman•2y ago
must be doing it wrong?
Doctor 🤖
Doctor 🤖•2y ago
Deno is serving index.html regardless of what url you request so when the page requests main.js it gets index.html again. Of the req in the handler, you’ll need to look at the url and give the correct response based off that.
beerman
beerman•2y ago
@dr_light @ndh3193 even so, none of the code in my main.js executes and the body gets logged to console even though I am not console.logging it anywhere. I'm super confused
beerman
beerman•2y ago
Doctor 🤖
Doctor 🤖•2y ago
Did you save main.js? Try doing a hard refresh. Cmd + shift + R in the browser.
beerman
beerman•2y ago
restarted the localhost multiple times as well That seems to have worked