I need to use react js as frontend and yii2 as backend.I've tried create-react-app for installing react. but it serves on port (cant serve on port:80). therefore I'm having trouble to fetch data from the backend.
the error I receive is (CORS error). but actually I need an absolute solution for fetching data from API.
Related
There is a bug with vite react, it doesn't render the data from the backend to the frontend in mobile, but calling the backend /ping or routes with res json the backend does respond.
github:https://github.com/dev-ronaaldll/try-mern-mysql-crud
Creating a basic crud of tasks, the backend data is not displayed with react on mobile.
What extra configuration do it need to make it work?
I have the solution but I want to know if someone can help me.
1 Solution
replace the fetch/axios from localhost to "ip/192.168.1.100" works.
2 Solution
using a proxy conf in vite and react
I have recently developed an React app in which I made HTTP request to external API using Axios library. Then I used gh-pages to deploy it. But it doesn't even show up (it's a blank page). I know GitHub only hosts static pages. The React app is running perfectly fine on localhost.
When I host React App on Localhost using npm start and request data using HTTP GET request using Axios Library. I receive a JSON format data from the API. And I use this data to show on front end of the React App.
But when I host the react app on git hub pages and request for data using the same way. It does not send HTTP requests to the API. And hence webpage is static in nature
have you tried to change http:// to https://?
because browsers nowadays don't let http requests to happen
I am sending a request from my react app localhost:8080 to my lumen api localhost:8000 to retrieve json data.
This is my routes.php in lumen: $app->get('list', 'ArticleController#listAll');
You will need to install fruitcake/laravel-cors library and follow the instructions to create a middleware and such
My application having multiple request to different API URL's request, when a particular component renders.
I am facing the CORS issue since I am using multiple URLs' , so in order to avoid i haved installed http-proxy-middleware package.
In setupProxy.js, I used below code. which is not working
Note: I having same endpoints with different api urls's in my project. How deal with this cases
app.use(proxy("/rest/V1/orders",{target:"https://example.com/",changeOrigin:true}));
app.use(proxy("/rest/V1/orders",{target:"https://example.net/",changeOrigin:true}));
app.use(proxy("/rest/V1/orders",{target:"https://example.org/",changeOrigin:true}));
Try this. Download as ZIP file and check setupProxy.js in the SRC folder.
https://github.com/lyhd/reactjs/tree/fix-cors
I have some local text files which are fetched using xmlHttpRequest properly in reactjs componentDidMount life-cycle method. I am going to have ssr for my app and I decided to use Nextjs for this purpose. However, such local files are not fetched with xmlHttpRequest in Nextjs and error is shown while fetching.
I have installed webpack raw-loader and file-loader and added relevant config to next.config.js to solve this issue with no result.
How can I tackle this issue in Nextjs since it's an ssr framework and some codes in client-side ones might not be read in server-side?