I’m doing a MERN stack (MongoDB, Express, React, Node) project in which I need to make a HTTP request, in a React component, to the database to get a field of a model. I’m using Axios (could use any other method) but the thing is I want to hide the URL but don’t know how.
The important thing for me is to get the "category" field and display it in the component
import React, {useState, useEffect} from "react"
import Heading from "../../common/Heading"
import "./Location.css"
import axios from 'axios'
const Location = () => {
const [locations, setLocations] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios.get('http://localhost:5000/properties/categories'//this is what I want to hide);
setLocations(result.data);
};
fetchData();
}, []);
return (
<>
<section className='location padding'>
<div className='container'>
<Heading title='Explore By Location' subtitle='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.' />
<div className='content grid3 mtop'>
{locations.map((item, index) => (
<div className='box' key={index}>
<img src={} alt='' />
<div className='overlay'>
<h5>{}</h5>
<p>
<label>{}</label>
<label>{}</label>
<label>{}</label>
</p>
</div>
</div>
))}
</div>
</div>
</section>
</>
)
}
export default Location
This code isn’t finished just in case. Server is set up with Express and Mongoose as a way to interact with MongoDB.
Someone told me that they make only POST requests without URLs, send always the same JSON, then encrypt the JSON parse used in the backend in base 64 and point all requests to the same URL.
I know leaving a URL like that in the frontend isn’t a good idea even though it doesn’t GET any sensitive info, just don’t know if when finished it’ll pass the SSL certificate test.
Also my app doesn’t have and use sensitive information at all and all requests are GETs to see info that is stored in DB
2
Answers
You can find workarounds to generate your URL string on the runtime, but that really does not worth the efforts, as you’ll be sending these requests from the client’s browser to your backend, they can inspect the network tab and see the outgoing requests to your backend, and that’s fine.
You can shift your focus, to working on having a better and more secure communication between your front-end and backend. For example:
Use environment variables
Use a proxy server or a backend platform as a service (BaaS)
Use a secure hosting platform