i am very very new to backend and express js. I wanted to fetch data from my rest api but it is sending this error net::ERR_FAILED.
//my api
const express = require("express");
const app = express();
app.get("/", (req, res)=>{
res.send("hello world!!!")
})
const videos = {
"source": "...",
"url": ".."
}
app.get("/api/home", (req, res)=>{
res.send(videos)
})
app.listen(3500, ()=>console.log("listening at port 3500..."))<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<button onclick="init()">hey</button>
<script>
function init(){
const url = "http://localhost:3500/api/home"
fetch(url).then(res=>res.json()).then(result=>{
console.log(result)
})
}
</script>
</body>
</html>i am very very new to backend and express js. I wanted to fetch data from my rest api but it is sending this error net::ERR_FAILED.
//my api
const express = require("express");
const app = express();
app.get("/", (req, res)=>{
res.send("hello world!!!")
})
const videos = {
"source": "....com",
"url": "...com"
}
app.get("/api/home", (req, res)=>{
res.send(videos)
})
app.listen(3500, ()=>console.log("listening at port 3500..."))<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<button onclick="init()">hey</button>
<script>
function init(){
const url = "http://localhost:3500/api/home"
fetch(url).then(res=>res.json()).then(result=>{
console.log(result)
})
}
</script>
</body>
</html>I want to console log the data videos from the api when i click the button, but its not working.
it even says:
Access to fetch at 'http://localhost:3500/' from origin 'http://127.0.0.1:5500' 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. index.html:12 GET http://localhost
Share Improve this question asked Dec 17, 2020 at 11:55 DjBillje OfficialDjBillje Official 3862 gold badges4 silver badges18 bronze badges 1- Check this out. It's from the official Express docs. You can just enable all origins while you're developing/testing your backend and then, prior to production release, set your domain name there. That will only allow traffic from that origin to be further processed by your backend. – Milan Velebit Commented Dec 17, 2020 at 12:14
5 Answers
Reset to default 7Because your front-end service address port and back-end service address port are different, Cross-Origin Resource Sharing is triggered. That's why you got the error in the console of the browser.
In order to enable CORS, we can use cors middleware.
Or, use a http-proxy-middleware to proxy your API to the target server.
Frontend => local HTTP server => target server.
net::ERR_FAILED 200 Has happened to me in Windows when I had near to 0 free space on the disk C:, I was not able to load my page and the error appeared especially for *.mp4 file which had dozens megabytes of size and the web app tried to preloaded it.
I had similar issue. Check /etc/hosts on your machine and try to add (if does not exists) 127.0.0.1 localhost
//my api
const express = require("express");
const app = express();
app.get("/", (req, res)=>{
res.send("hello world!!!")
})
const videos = {
"source": "....com",
"url": "...com"
}
app.get("/api/home", (req, res)=>{
res.send(videos)
})
app.listen(3500, ()=>console.log("listening at port 3500..."))<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<button onclick="init()">hey</button>
<script>
function init(){
const url = "http://localhost:3500/api/home"
fetch(url).then(res=>res.json()).then(result=>{
console.log(result)
})
}
</script>
</body>
</html>CORS.
Assume cors as a bridge between your frontend and backend. Each side should know that coming party have required permission to access their resources. So use Control of "Allow Origin"
Refer to cors policy on either side (backend and frontend)