We Keep Coding

I'm making a Choropleth Map of the United States and its counties. The first map I used which was the world map worked fine. The new map doesn't work [duplicate]

I'm trying to make a request in a local file, but I don't know when I try to do on my computer show me an error. Is possible make a fetch to a file inside your project?
// Option 1
componentDidMount() {
fetch('./movies.json')
.then(res => res.json())
.then((data) => {
console.log(data)
});
}
error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// Option 2
componentDidMount() {
fetch('./movies.json', {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then( res => res.json())
.then((data) => {
console.log(data);
});
}
error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// This works
componentDidMount() {
fetch('https://facebook.github.io/react-native/movies.json')
.then( res => res.json() )
.then( (data) => {
console.log(data)
})
}

Try to place your json file in the public folder like so :
public/movies.json
and then fetch using
fetch('./movies.json')
or
fetch('movies.json')
I have experienced the same problem previously. When I place the json file in the public folder, problem is solved.
When using fetch, React normally reads asset/resources files in the public folder.

You are trying to serve a static file with a fetch command, which inherently requires the file to be served by a server. To resolve the issue, you have a few options available to you. I am going to outline the two that are most commonly suggested for such a thing:
Use Node.js and something like expressjs to host your own server that serves the file you want to fetch. While this procedure might require more effort and time, it is certainly more customizable and a good way to learn and understand how fetching from a backend works.
Use something like Chrome Web Server to easily set up a very simple server to serve your file on your local network. Using this method, you have very little control over what you can do with said web server, but you can quickly and easily prototype your web application. However, I doubt there's a way to move this method to production.
Finally, there are other options where you can upload one or more files online and fetch them from an external URL, however this might not be the optimal strategy.

Your JSON file needs to be served by the server so you need the express server (or any other). In this example we are using express.
Note: you can also download git repo
App.js File
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
const myHeaders = new Headers({
"Content-Type": "application/json",
Accept: "application/json"
});
fetch("http://localhost:5000/movie", {
headers: myHeaders,
})
.then(response => {
console.log(response);
return response.json();
})
.then(data => {
console.log(data);
this.setState({ data });
});
}
render() {
return <div className="App">{JSON.stringify(this.state.data)}</div>;
}
}
export default App;
server.js
var express = require("express");
var data = require('./movie.json'); // your json file path
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get("/movie", function(req, res, next) {
res.send(data);
});
app.listen(5000, () => console.log('Example app listening on port 5000!'))

I was encountering the same error and there are two changes I made in my code to get rid of the error. Firstly, you don't need an express server to serve your files you can read data from a local json file inside your public folder in your create-react-app directory.
const getData=()=>{
fetch('data.json',{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then(function(response){
console.log(response)
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}
useEffect(()=>{
getData()
},[])
First, as suggested in some of the answers above ensure that your json file is inside the public folder and the path parameter inside the fetch function is correct as above. Relative paths didn't work for me.
Second, set the headers as shown. Removing the headers part from my fetch call was still giving me this error.

a simple solution to this is to use live server extension (if you use vs code)

Say that i have the following file test.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
var depdata;
depdata = fetch("test1.geojson")
.then((data) => {
return data;
});
depdata.then(function(data) {console.log(data)})
</script>
</body>
</html>
When access the file in the firefox through file://... I get the following error:
Cross-Origin Request Blocked:....
When I followed the error on firefox I got the following explanation
CORS requests may only use the HTTPS URL scheme, but the URL specified by the request is of a different type. This often occurs if the URL specifies a local file, using a file:/// URL.
To fix this problem, simply make sure you use HTTPS URLs when issuing requests involving CORS, such as XMLHttpRequest, Fetch APIs, Web Fonts (#font-face), and WebGL textures, and XSL stylesheets.
So the as far as I understand we just need to access the test.html through HTTP. The most straight forward way around this problem was the python simple http server. In the terminal.
> cd directory of the project.
> python3 -m http.server 8000 --bind 127.0.0.1
Then in the browser:
http://localhost:8000/test.html

My go-to approach is to use express-generator to set up a quick local server, then run ngrok (free tier is fine) and point your app to the url it creates. This has the advantage of letting you easily test your fetching in the iOS simulator or Android emulator, as well as on a device not tethered to your computer. Plus, you can also send the url to people testing your app. Of course, there would need to be a way for them to manually input that url so the app could set it as the fetch endpoint.

I got it working rather very simple way - no express / webserver really needed. Just do :
import data from '../assets/data.json';
and use the json data like this (say if it is a JsonArray) :
data.map(movie ...
Do this in App.js or some other class extending React.Component,

The error
Unexpected token < in JSON at position 0
comes from the HTML file that is returned if the request is unsuccessful. The first element (at position 0) of an HTML file is typically a '<'. Instead of a JSON, an attempt is made to read in an HTML file.
You can find the returned HTML File in the Inspect Tool -> Network -> Erroneous file marked in red -> Reponse. There you can see what the specific error is. Example Error Message
To fix the error for me, it helped to move the file to be imported to the Public folder of my React project and then import it like this from a file in the 'src' folder: fetch('dataTemplate.json')

You can place your json file in the public folder. In your React component you can use userEffect (). You don't need Express.js for this case.
React.useEffect(() => {
fetch("./views/util/cities.json")
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
});

To fetch local files, a good alternative:
npm install file-fetch
to read a file:
const fileFetch = require('file-fetch')
fileFetch('./public/user.json').then((res) => {
res.body.pipe(process.stdout)
})
See doc

Error React Proxy error: Could not proxy request

Why do I got this error:
Proxy error: Could not proxy request /api/v1/management/me from localhost:3000 to http://localhost:8080 (ECONNREFUSED).
Got this axios setting:
axios.defaults.baseURL = "http://localhost:3000/";
And set this in package.json:
"proxy": "http://localhost:8080"
tried also:
"proxy": "http://localhost:8080/"
And have following call:
axios({
method: "get",
url: "api/v1/management/me",
data: {},
headers: { crossDomain: true },
})
When I call directly http://localhost:8080/api/v1/management/me I got response from server.
I have following backend, Vapor route setting. Maybe something wrong / specific here?
let protectedAPIRouter = authSessionRouter.grouped("api/v1").grouped(User.guardAuthMiddleware())
let managementAPIRouter = protectedAPIRouter.grouped("management")

I would suggest the following solutions:
Try to change localhost to IP address: "proxy": "http://your_IP_address:8080"
Try this construction also:
"proxy": {
"/api/*": {
"target": "http://localhost:8080",
"secure": false
}
}

You need to set up a proxy to the backend service you want to access.
First install (http-proxy-middleware) package.
Remove the ("proxy": "http://localhost:8080/") or the Url behind the proxy in the package json file.
In the src folder create a file (setupProxy.js) and and the following code.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8080',
changeOrigin: true,
})
);
};

I solved this issue change localhost to 127.0.0.1 in the package.json over the client project.

How to set proxy for different API server using Nuxt?

So I have 2 applications:
an Adonis API server accessible via http://10.10.120.4:3333
A SSR app using Nuxt.js accessible via http://10.10.120.4:80
The Nuxt.js app is accessible outside using url http://my-website.com. I have axios module with this config
axios: {
baseURL: '0.0.0.0:3333/api',
timeout: 5000
}
Now the problem is, when I am requesting data with asyncData it works, but when the request was made from outside asyncData, say created() for example, it throws an error saying the url http:0.0.0.0:3333 is missing which is true since it's already running in the browser and not in the server.
The first solution that I've tried is to change the baseURL of the axios module to this
axios: {
baseURL: 'http://my-website.com/api',
timeout: 5000
}
But it seems nuxt server can't find it, so I think the solution is to make proxy and installed #nuxtjs/proxy.
And this is my proxy config in nuxt.config.js
{
proxy: {
'/api': 'http://my-website.com:3333',
}
}
and then I just changed my axios baseURL to
http://my-website.com/api
But again it didn't work.
My question is, how do you deal with this kind of scenario? Accessing different server from browser?

When using Proxy in a nuxt project you need to remove baseUrl and set proxy to true as seen below.
axios: {
// Do away with the baseUrl when using proxy
proxy: true
},
proxy: {
// Simple proxy
"/api/": {
target: "https://test.com/",
pathRewrite: { "^/api/": "" }
}
},
when making a call to your endpoint do:
// append /api/ to your endpoints
const data = await $axios.$get('/api/users');
checkout Shealan article

OPTIONS net::ERR_EMPTY_RESPONSE Angular - What are the CORS settings?

I am trying to make a get request to a mongoDB which is on a server. This is the same server that my webpage will be hosted. I have created an API so that the webpage can make requests to the mongoDB.
My first issue was with it being blocked by CORS policy so I looked into this and the information I found led to me adding in corsOptions to server.js (the API file running on the server).
This is my server.js (The API file I am running on the server to connect the webpage with node.js connect to the mongoDB):
// Dependencies
var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var cors = require('cors');
var app = express();
const corsOptions = {
origin = true,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true,
preflightContinue: true,
maxAge: 600,
};
app.options('*', cors(corsOptions))
app.use(cors(corsOptions))
// MongoDB
mongoose.connect('mongodb://serverip:27017/database');
// Express
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// Routes
app.use('/api', require('./routes/api'));
// Start server
app.listen(3000);
console.log('Listening on port 3000...');
My .component.ts runs a simple httpClient.get request to get the information, like so:
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin': '*'
})
};
this.httpService.get('http://serverip:3000/api/collection/', httpOptions).subscribe(
result => {
console.log(result);
},
error => {
console.log('Error occured', error);
}
)
I get the following error in Google Chrome:
OPTIONS http://serverip:3000/api/collection/ net::ERR_EMPTY_RESPONSE
I've run Chrome with this command in WIN+R:
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
I get this error on that Chrome:
OPTIONS http://serverip:3000/api/collection/ net::ERR_EMPTY_RESPONSE
If I remove the code in the server.js that is to do with CORS, and load the webpage in the Chrome with no web security then webpage loads the data from MongoDB with no issues at all.
I also tried to put OPTIONS into the methods in the server.js but I still get the same error.
I assume this error is from the corsOptions but what do i need to change/add to resolve this error.
Any help is appreciated!

First of all try to test yout API using Postman to ensure you have the correct response. secondly try to add cors withou any option. this ensures you to use default cors options, and then try to add your's one by one.
app.use(cors())
lastly, you do not need to add any headr to your http call, so you can remove this part
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin': '*'
})
};

I am guessing if you added
Access-Control-Allow-Origin: *
Content-Type: application/json
Cache-Control: no-cache
as header to the client call, that should do the trick.
Reference: "CORS GET returns an empty response body in Firefox"

Node.js server responding with javascript file, not main .html?

I have a simple node.js server which is meant to respond to GET requests at the address http://localhost:3000/hi/ with my index.html document, and I cannot figure out why it is reading/responding with an (index) and index.js.
My function which works with router objects is:
const http = require('http');
const path = require('path');
const fs = require('fs');
let contacts = {
"1234": {
id: "1234",
phone: "77012345678",
name: "Sauron",
address: "1234 Abc"
},
"4567": {
id: "4567",
phone: "77012345678",
name: "Saruman",
address: "Orthanc, Isengard"
},
};
let loadStatic = (req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./index.html', null, (err,data) => {
if (err) {
return console.log('error');
} else {
res.write(data);
}
res.end();
});
}
let routes = [
{
method: 'GET',
url: /^\/contacts\/[0-9]+$/,
run: getContact
},
{
method: 'DELETE',
url: /^\/contacts\/[0-9]+$/,
run: deleteContact
},
{
method: 'GET',
url: /^\/contacts\/?$/,
run: getContacts
},
{
method: 'POST',
url: /^\/contacts\/?$/,
run: createContact
},
{
method: 'GET',
url: /\/hi\//,
run: loadStatic
},
{
method: 'GET',
url: /^.*$/,
run: notFound
}
];
let server = http.createServer((req, res) => {
let route = routes.find(route =>
route.url.test(req.url) &&
req.method === route.method
);
route.run(req, res);
});
server.listen(3000);
Request URL: http://localhost:3000/hi/index.js
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade
Connection: keep-alive
Content-Type: text/html
Date: Mon, 20 Aug 2018 23:41:45 GMT
Transfer-Encoding: chunked
Above is the response as processed by google chrome browser. I have no idea first of all, what (index) is - it contains all my html script, along with index.js which is also sent along (presumably with the html doc), which is the name of the javascript file that's supposed to be controlling the DOM. Both contain the html script, which is not right, the .js should be different, and it attempts to read the .js first. Also, the error in the console says "unexpected '<'" which should be obvious since it's trying to read a .js file which contains nothing but .html script. I am still very new to this, and can't find an answer. Thanks for reading, and hopefully revising!
**EDIT - I added more pertinent code to the server script. Lots of redacted functions, but those all work fine. It's this one request that isn't. index.html, index.js (this file controls the DOM and gets script tags in index.html), and newserver.js (name of this file) are in the same folder on my desktop. Hope that helps.

index.js is not "sent along" with index.html as you seem to think. The browser first requests /hi. When you send the content for that HTML file, the browser then parses that HTML file and for any <script src="xxx"> tags it finds in the HTML, the browser, then makes a separate request to your server for whatever the src file is in the script tag such as index.js.
Because you don't have a route for /index.js, it will match your notfound route (which you don't show the code for). FYI, your notfound routes should probably return a 404 status as this makes things a bit easier to debug (there will be 404 errors in the browser console which are easy to see).
You will need a route for all resources that your HTML files refer to (scripts, css files, images, etc...). node.js does not serve any files by default (unlike some other web servers). It only serves the files you specifically write routes for and write code to send.
It is possible to write a generic route that will serve any file in a specific directory that exactly matches a request. The Express framework has such as feature and is called express.static(). It is very useful for serving static resources that only need a static file sent. If you're going to continue to write your own http framework and not use one that's already been built, you will probably want to write such a static matcher. It is important, however, that you point a static file matcher at a directory that only contains public files so people can't inadvertently get access to private server files. And, one has to prevent things like .. or root paths being in the URL too.