I am using restinio as my backend API server. Previously I used ReactJS for front-end and solved this proxying issue using "proxy": "http://localhost:4000" in package.json as documented here; https://create-react-app.dev/docs/proxying-api-requests-in-development/.
Now I'm using Next.js and I could use fetch function directly to get data from back-end, but if possible would like to use next-connect as this module has many features that would simplify coding for my current project.
I tried several ways like rewriting path using rewrites module;
module.exports = {
async rewrites() {
return [
{
source: '/about',
destination: '/',
},
]
},
}
but still couldn't solve the problem. How should I go about it?
Thank you.
You can use NextJs internal API route, https://nextjs.org/docs/api-routes/introduction
Using this you can map the requests coming from FE to Nextjs API endpoint and then it will be forwarded to actual backend service.
But if your all api calls are in server then, its not required to mask it. For client side calls you can do it
Related
I'm making a static website with NextJS and Amplify. (+ react, typescript etc)
When I'm using dynamic routing like /projects/[id],
It works well on my local but gets some problems after the deployment (after I upload the build files to S3 for static hosting)
Because the NextJS make http fetch request on the web by the route.
For example, when someone access to example.com/projects/1234,
it call a GET request to example.com/projects/1234 automatically.
And because there are no APIs like that, it returns 404 and do not show the detail page.
In the NextJS document, it says
FAQ > Why does Next.js have its own Router? ... It supports shallow routing which allows you to change the URL without running data fetching methods
But I don't want to fetch the data by URLs...
Q. How can I restrict this feature?
FYI) I tried 'trailingSlash: true` in the nextConfig with some search results on web, but no luck.
Below is my next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [
"some-name.s3.some-region.amazonaws.com",
],
},
trailingSlash: true,
}
module.exports = nextConfig
Thanks in advance.
p.s. nextJS version is 12.1.0
It's my fault.
I must use 'Link' of NextJS instead of the 'a' tag.
After compared my another project with this one, I updated some 'a' tag as 'Link' and it started working fine...
My React App proxies requests to the backend using
"proxy": "http://localhost:3001"
Inside package.json for dev purposes.
Somehow when I use a React Router Link component for redirection, the request is sometimes forwarded to the backend through the proxy instead of requesting the frontend page to be served. Why is this happening? Also, it's INCONSISTENT! Meaning sometimes it will do it, and sometimes it won't, despite clicking on the exact same Link component. Any ideas?
I found a solution!
I have removed the proxy setting from package.json altogether and added a setupProxy.js file inside my src folder containing the following:
const proxy = require("http-proxy-middleware");
module.exports = app => {
app.use(proxy.createProxyMiddleware("/api", { target: "http://localhost:3001/" }));
};
Are you using identical routes on your front-end and back-end?
I would recommend you placing API in front of all your routes on the backend to avoid any inconsistencies.
so if your backend route was
/users
change it to
/api/users
I have a couple of questions regarding how ReactJS should work in development and production. My ReactJS application was built starting from creare-react-app boilerplate. I have a SpringBoot backend listening on port 8080. The first thing I noticed is that if I set a code like this to make requests the code hang:
async componentDidMount() {
...
const response = await fetch('http://localhost:8080/api/compliance');
I need to convert it into:
async componentDidMount() {
...
const response = await fetch('/api/compliance');
and then add the line:
"proxy": "http://localhost:8080",
and this works fine. The problem is that when I put this in a pre-production environment (or integration environment) where I have a URL like http://www.mywebsite.com I got:
Invalid Host Header
Looking on the web I noticed that probably this could be to:
1. proxy that checks. the HTTP Header host and verify it to avoid security attacks
2. webpack package
I would like to understand:
1. Is proxy really necessary to let ReactJS app talk with its backend?
2. If no, how I can solve the issue (currently solution on the web didn't solve my problem)?
Generally proxy is not meant for production. Your app should provide both app and api on same port, on one server. https://stackoverflow.com/a/46771744/8522881
I have a React app that pulling data via Rest API from a different domain.
In my development env in order to work around this, I am using http-proxy-middleware.
module.exports = function (app) {
app.use(
createProxyMiddleware("/shabbat", {
target: "https://www.hebcal.com",
changeOrigin: true
})
)
}
Since I am using Firebase to host my web app I need to handle this via Firebase but can't figure it our how to properly configure.
I would appreciate it if someone can share a working example.
Thank you
i also got this error, i changed to use another https://xxx api to test,then worked well, so i guess this issue is due to firebase's settings, but i haven't found the solution
I am trying to do an external API call using the git project https://github.com/zuiidea/antd-admin. Even after trying for more that 2 weeks i couldn't able to figure it out. This package is using mock data which is giving the data feed for the sample pages. But i am going to use this package to build a separate web app for one of my project.
I tried to fetch one of the online json api from https://jsonplaceholder.typicode.com/ but i cant able to fetch the data. I still cant figure out where i need to call the api since it was using dva, umi framework
I need an example so that i can call the api from this package which will be helpful for me to complete my project.
In .umirc.js file you must declare proxy for app like below
proxy: {
'/api/v1/': {
target: 'https://jsonplaceholder.typicode.com/',
changeOrigin: true,
pathRewrite: { '^/api/v1/': '' },
},
},
After that you can test external API like this
curl -X GET http://localhost:<port>/api/v1/todos