When I try to Open My GitHub Raw file in Chrome Browser or Microsoft Edge. I Can't Open that URL.
.json I got this Error When I Opend in Browser
Console Error
import React, { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import ProjectCard from "./ProjectCards";
import Particle from "../Particle";
function Projects() {
const [project, setProject] = useState([])
const fetchProject = async () => {
const url = '.json';
let data = await fetch(url);
let myProjects = await data.json();
setProject(myProjects.projects);
}
useEffect(() => {
fetchProject();
});
return (
<Container fluid className="project-section">
<Particle />
<Container>
<h1 className="project-heading">
My Recent <strong className="purple">Works </strong>
</h1>
<p style={{ color: "white" }}>
Here are a few projects I've worked on recently.
</p>
<Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
{project.map((element) => {
return <Col md={4} className="project-card" key={element.imgurl}>
<ProjectCard
imgPath={element.imgurl}
isBlog={false}
title={element.title}
description={element.description}
ghLink={element.sourceLink}
badge={element.badge}
demoLink={element.liveDemoLink}
/>
</Col>
})}
{/* <Col md={4} className="project-card">
<ProjectCard
imgPath={bitsOfCode}
isBlog={false}
title="Bits-0f-C0de"
description="My personal blog page build with Next.js and Tailwind Css which takes the content from makdown files and renders it using Next.js. Supports dark mode and easy to write blogs using markdown."
ghLink=";
demoLink="/"
/>
</Col> */}
</Row>
</Container>
</Container>
);
}
export default Projects;
But I am able to open this URL in My Mobile Browser.
I try to open my GitHub JSON file in raw content, so I can use that file as a Fetch API in my Projects
JSON File Url :-
.json
When I try to Open My GitHub Raw file in Chrome Browser or Microsoft Edge. I Can't Open that URL.
https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json I got this Error When I Opend in Browser
Console Error
import React, { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import ProjectCard from "./ProjectCards";
import Particle from "../Particle";
function Projects() {
const [project, setProject] = useState([])
const fetchProject = async () => {
const url = 'https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json';
let data = await fetch(url);
let myProjects = await data.json();
setProject(myProjects.projects);
}
useEffect(() => {
fetchProject();
});
return (
<Container fluid className="project-section">
<Particle />
<Container>
<h1 className="project-heading">
My Recent <strong className="purple">Works </strong>
</h1>
<p style={{ color: "white" }}>
Here are a few projects I've worked on recently.
</p>
<Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
{project.map((element) => {
return <Col md={4} className="project-card" key={element.imgurl}>
<ProjectCard
imgPath={element.imgurl}
isBlog={false}
title={element.title}
description={element.description}
ghLink={element.sourceLink}
badge={element.badge}
demoLink={element.liveDemoLink}
/>
</Col>
})}
{/* <Col md={4} className="project-card">
<ProjectCard
imgPath={bitsOfCode}
isBlog={false}
title="Bits-0f-C0de"
description="My personal blog page build with Next.js and Tailwind Css which takes the content from makdown files and renders it using Next.js. Supports dark mode and easy to write blogs using markdown."
ghLink="https://github.com/soumyajit4419/Bits-0f-C0de"
demoLink="https://blogs.soumya-jit.tech/"
/>
</Col> */}
</Row>
</Container>
</Container>
);
}
export default Projects;
But I am able to open this URL in My Mobile Browser.
I try to open my GitHub JSON file in raw content, so I can use that file as a Fetch API in my Projects
JSON File Url :-
https://raw.githubusercontent.com/imhardikdesai/JSON-Data/main/Hardik-Desai-Portfolio/project.json
- Even am not able to access githubusercontent.com through my ISP, although I can access it through VPN. So looks like it might have been blocked at DNS level. As far as you able to access through Mobile Browser, it might be cached or your Browser might have WebPage load faster feature(e.g. AMP for Chrome) – Malay Shah Commented Dec 9, 2022 at 8:06
- 1 so, now what I have to do for resolve this error – Desai Hardik Commented Dec 9, 2022 at 13:24
- hello any one found the solution please advise – Pranav Maheta Commented Mar 11, 2023 at 12:55
- If you are in India, try with airtel network. It is accessible. – knkumar93 Commented Apr 12, 2023 at 16:26
3 Answers
Reset to default 10Try changing your dns server to something like cloudflare, google rather than the isp provided dns. Cloudflare (1.1.1.1, 1.0.0.1) google dns (8.8.8.8, 8.8.4.4)
You can follow this guide to change your dns server https://developers.google.com/speed/public-dns/docs/using#change_your_dns_servers_settings
This happens due to the DNS settings of the Jio Fiber network.
To solve this issue :
For Mac OS:
Stay connected to the same network.
Search for "DNS" in settings search.
Click on "DNS Servers" option.
DNS settings for your network open.
- Click + to add an entry to DNS Servers.
- Add 8.8.8.8 as an entry.
- Click OK and reload to access raw files from GitHub.
I literally spent the whole day looking for the solution but finally found the solution in this link in GitHub Answer by AdityaMotale https://github.com/orgs/community/discussions/42655
My Comments
- I was facing this issue of not opening raw file (CSV) in Github.
- I followed the instructions mentioned below.
- I am using Windows 11, so referred the Link (https://developers.cloudflare.com/1.1.1.1/setup/windows/). However, you can follow instructions per your operating system (https://developers.cloudflare.com/1.1.1.1/setup/)
- For Windows 11 users, follow the below instructions Select Start Menu -> Got To Settings -> Select Wi-Fi -> Select Hardware Properties -> Scroll to DNS server assignment and select Edit -> then points 4 to 9 mentioned in the link (https://developers.cloudflare.com/1.1.1.1/setup/windows/).
- I have mentioned Steps before (points 4 to 9) since I was facing difficulty locating them in the settings options.
- Also please select the "Read 1.1.1.1 resolver" option in the above link and not other options if your issue pertains to not opening raw in GitHub (like my case)
Also I am copying the answer from the Github Post for your reference for Conceptual purposes
What Does 1.1.1.1 Do? 1.1.1.1 is a public DNS resolver service provided by Cloudflare. It aims to improve both the speed and privacy of your internet connection. When you use 1.1.1.1, your DNS queries are resolved through Cloudflare's network, known for its reliability and speed. This can help when your ISP's DNS servers might be slow or have issues resolving certain websites.
How to Set It Up:
Setting up 1.1.1.1 is quite straightforward, and Cloudflare provides detailed instructions for different operating systems. Here's a link to set it up according to your operating system:
Setting Up 1.1.1.1 DNS (https://developers.cloudflare.com/1.1.1.1/setup/)
Just follow the instructions for your specific OS, and you should be able to switch to using the 1.1.1.1 DNS resolver in no time.
By using 1.1.1.1 as your DNS resolver, you can potentially bypass any DNS-related issues or blocks that your ISP might have in place. It's a simple and effective way to improve your internet experience.