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
Related
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
I would like to know if it is possible to alter all the api calls made from my react app to my backend server. I used to have the static files to sit around in my project root directory, so when I made an api call with axios like await axios.get('/api/my-endpoint') it all worked fine and my requests were translated to GET https://www.example-url.com/api/my-endpoint. But now I am migrating to AWS EC2 and decided to serve static files from AWS S3. So now since the api is in a remote server all my api calls are broken. I need to replace all api calls to https://www.another-example-url.com/api/.... I know I can set the new URL in an environment variable, but that would force me to manually alter all of the api URLs in my front-end codebase. I would not be very happy to do this, since there are almost a thousand of them.
I tried to set the axios baseURL like so:
import axios from "axios";
const instance = axios.create({
baseURL: "www.another-example-url.com"
});
export default instance;
but then all the requests were translated to GET https://www.example-url.com/www.another-example-url.com/api/my-endpoint
Is there a lazy way of doing this? Or do I have to manually alter them all?
You can easily set this using "proxy" field in package.json file of client side. Just add following line
...
"proxy": "https://www.another-example-url.com",
...
edit: I almost forgot that you were asking for production build. So react-amazing-proxy is an alternate to create-react-app proxy which can have feature to use proxy in production build.
Another lazy way, if you are familiar with docker, would be to Dockerize your development built.
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
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I am currently writing a web app and am using AWS Amplify.
I created my API Gateway and my lambdas before using Amplify so I imported my existing API to Mobile Hub.
My API gateway has 2 stages dev and prod.
According to the Amplify documentation here is the code to call my API from my app.
API.get(apiName, path, myInit).then(response => {
// Add your code here
}).catch(error => {
console.log(error.response)
});
apiName is auto generated by Mobile Hub and is always ...amazonaws.com/dev
path will be /items for example
resulting in a call being made to ...amazonaws.com/dev/items
I haven't seen anything in Amplify or AWS documentation to be able to call ...amazonaws.com/prod/items using the Amplify library.
I tried to edit the mobile-hub-project.yml and change it from :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: dev
to :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: prod
and push the new configuration but the behaviour is still the same.
Could anyone help me to manage multiple stages using Amplify ?
can you check the file aws-exports.js on aws_cloud_logic_custom array. there each endpoint has an attribute called name which is the one you use with the Amplify. You can edit the endpoint by changing to the stage you want to use. By default aws-exportsuses dev stage.