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);
}
UU
Unknown User530d ago
K
kidnextdoor530d ago
Is there any way to ignore cors in node fetch?
UU
Unknown User530d ago
K
kidnextdoor530d ago
Then how do people usually fetch the data in those sort of scenarios?
UU
Unknown User530d ago
K
kidnextdoor529d 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
UU
Unknown User529d ago
K
kidnextdoor529d 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)
D
Doctor 🤖529d ago
Put type="module" on your script tag.
K
kidnextdoor529d ago
Thanks, that has gotten of the import error, but document is still undefined
D
Doctor 🤖529d ago
This is in the browser yes?
K
kidnextdoor529d ago
no, when I run deno run --allow-write --allow-net main.js
D
Doctor 🤖529d 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.
K
kidnextdoor529d ago
K
kidnextdoor529d ago
So how does one interact with the dom?
D
Doctor 🤖529d ago
There is no dom in deno.
K
kidnextdoor529d ago
So deno is not meant to be used as a node replacement for web development?
D
Doctor 🤖529d ago
The webpage has a dom. The deno instance doesn’t.
K
kidnextdoor529d ago
right, but I can't even access the dom like i would in js document.querySelector and so on
D
Doctor 🤖529d 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.
K
kidnextdoor529d ago
That's what I did ^ but it's not even logging the element
D
Doctor 🤖529d ago
Because you have other errors which broke the rest from running.
K
kidnextdoor529d ago
I thought that Deno ignores cors
D
Doctor 🤖529d ago
Deno does. Your web browser doesn’t.
K
kidnextdoor529d ago
I'm able to log the response to my terminal, but browser breaks.
D
Doctor 🤖529d ago
You loading the index.html is completely seperate from deno. These are two seperate instances of JavaScript running.
K
kidnextdoor529d 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
D
Doctor 🤖529d 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.
K
kidnextdoor529d ago
Is there a tutorial for this? you mean using serve?
D
Doctor 🤖529d ago
I haven’t used it myself but yes
K
kidnextdoor529d 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
D
Doctor 🤖529d ago
You didn’t send your index.html. You sent "Hello, World!"
K
kidnextdoor529d ago
the doc doesn't say how to
D
Doctor 🤖529d 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.
D
Doctor 🤖529d ago
D
Doctor 🤖529d ago
You can open a file with Deno.open and turn it into a ReadableStream<Uint8Array> with .readable.
K
kidnextdoor529d ago
This is terrible and not at all beginner friendly. I'm just gonna use fresh
D
Doctor 🤖529d ago
¯\_(ツ)_/¯
new Response((await Deno.open('./index.html')).readable)
new Response((await Deno.open('./index.html')).readable)
K
kidnextdoor529d ago
must be doing it wrong?
D
Doctor 🤖529d 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.
K
kidnextdoor527d 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
K
kidnextdoor527d ago
D
Doctor 🤖527d ago
Did you save main.js? Try doing a hard refresh. Cmd + shift + R in the browser.
K
kidnextdoor527d ago
restarted the localhost multiple times as well That seems to have worked
More Posts
Learning how this works under the hoodRecommended resources to learn how this stuff works that can be understood by a dummy without a backClosing a websocket server in a unit testHello, I'm an author of [rpc lib](https://github.com/deno-libs/rpc) and I'm currently writing unit tError The deployment failed Module not found> Error The deployment failed: Module not found "npm:@coingecko/cryptoformat". Link to module: httpHow to cancel or abort .pipeTo()?I prefer not asking, but after I found (what I consider) an MDN easter egg, I realized this is probais it possible to change how tsx bundles to js?So I’m wondering if it’s possible to get Deno to convert ```jsx <div class="test">Potato</div> ``` tcan't load external modules when run as child process with Deno.spawnChildHi! This is really weird, but I'm trying to run deno scripts under another deno process with Deno.spFile line operationsHello, How to perform the following file manipulations in Deno ? - Read the nth line - Remove the FFI how to pass (or get) 128-bit bigints to (or from) Rust functions?I want to pass bigints from Deno and get i128 or u128 in Rust. Do I have to use typed arrays for thaUnable to view logs to debug edge function for Deno Fresh + Deno DeployThanks for making Deno, and Deploy, and Fresh. I'm a huge fan. I'm building a feature to allow userTypeScript enumsSo enums are objects with all keys being values and values being keys. Most of the time when using eHow to get complete Deno RAM usage?Do we use `Deno.memoryUsage().rss` or should it be `rss+heapUsed+external`?Deno NPM VSCode IntellisenseIs there a work around for this at the moment? I want to try out Deno's NPM support but I lose IntelNeed help making fresh, rutt and preact base path awareI'm currently trying to make fresh base path aware. I already patched rutt to work with base paths. How do I render react?I'm using the configuration as shown in the Deno manual with preact, but how would I server-side renResolving 'dynamically imported module evaluation pending, but no pending ops'I've been getting this error quite a lot, but I haven't found a single way to know *which* unresolvehttp serve and serveTls using async iterator cannot serve multiple domains```javascript async f_serveTls() { var o_self = this // check if ssl cert existsHow to test if a file was created?I'm making a deno library that creates some folders and files, how can i check if it generates then Deno bundle duplicating variablesUsing Deno 1.26.2 I am trying to bundle https://github.com/Savory/Danet-Starter using `deno bundle Simple test, lots of type errorsHi! I made a library for Deno (https://github.com/Industrial/fresh-emotion) and am now trying to adAm I closing this server wrongly? The port is not free for a new listener! (`AddrInUse`)```ts const server = Deno.listen({ port: 80 }); (async function(){ for await(const conn of ser