I made some app that is making a request to a server and was working fine in development mode, but when I push it to Heroku it doesn't make any call to the server and in the console I see that is trying to request localhost:3000/request.
This is a Nuxt.js app and I am making the request with Axios.
I tried adding cors() but it didn't work. It is probably something about Nuxt.
axios.post('/request', data)...
You need to set the baseURL of axios. The base URL should ideally be derived from the environment (e.g. env variable). So, specify the axios in the Nuxt.JS config and axios should request the data from the correct URL.
Here is a snippet of the adapted Nuxt.JS config:
modules: [
['#nuxtjs/axios', {
baseURL: 'https://<YOUR-BASE-DOMAIN>'
}]
]
There is also an issue report on axios for nuxt: https://github.com/nuxt-community/axios-module/issues/134
Related
In development, when i was running the react server on localhost:3000. I used proxy in package.json to set the baseurl for my backend server, which was running on loacalhost:5000. So i just edited proxy in package.json to "localhost:5000". So all the api requests sent from axios will be directed to that url.
axios.get("/name").then(res=>({...}))
A request identical to the above would be redirected to:
localhost:5000/name
In production, when i deployed the app on online platforms like heroku and vercel. The api requests sent from react-app through axios, all failed. When deploying on heroku/vercel, I changed the proxy to the online backend url.
I want to know how to change the proxy when a react app is deployed online (preferably on heroku/vercel). So that my api requests won't fail.
Tech stack: react for frontend, axios to send requests and firebase for the backend. The backend is also deployed on heroku.
Any kind of support would be appreciated. Even if there's a better platform to deploy the app, I can switch to that as well.
You should create a config object and pick base_url based on the env.
On local, it will pick development url and on Heroku it will use production.
const configs = {
development: {
SERVER_URI: 'localhost:5000',
},
production: {
SERVER_URI: 'HEROKU_URI',
},
};
module.exports.config = configs[process.env.NODE_ENV];
Also replace your axios calls like this:
axios.get(`${config.SERVER_URI}/name`).then(res=>({...}))
I will like my baseUrl to be my domain name instead of localhost. Something like https://domain/api/post/allpost. I developed with nuxt and deployed with zeit now. But when i try to access the api using mydomain/api/post/all, it fails. But it works only in localhost:3000/api. I use axios.
in nuxt.config.js
...
env: {
baseUrl: process.env.baseUrl || "http://localhost:3000"
}
in nuxt page
Axios.get(`${process.env.baseUrl}/api/post/all`)
even when i change the baseUrl from localhost to "https://my-domain.com", It still cannot call my api routes. Please i need help
I just created a react-node-SQL app and I want it to run on Google Cloud (not firebase)
My React app runs on different port and my node app runs on different port.
I followed this article and added this line in my react-app package.json but I didn't worked out i.e href in button was still going to localhost:8081 but It didn't worked
I had my node running on port 8080, In package.json of my react app i added "proxy": "http://localhost:8080/" and in button when I did href="/api/status" it was going to localhost:8081 on which the react app was running
Now, Is it possible to run both node and react under the same project? or we need to create separate project for them.
[Update:] I am using webpack, In my webpack config file, I added this
devServer: {
proxy: {
'/': 'http://localhost:8080'
}
},
The problem with this, that even in my react app, on Startup (running on 8081) when it opens the webpage localhost:8081/ it throws an error saying cannot get the page
but if I do something like this
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
},
it opens the page homepage normally. Now my api and callback uRL after authentication aren't configured with have prefix as api.
Basically, when you do an ajax request from react app, like axios or fetch it will use the proxy: <..> for the backend url. But, href doesn't work with proxies. In that case you need to manually configure proxy using the setupProxy.js documented in the manual proxy page.
Check out this issue:
Same error here, it still routes to localhost:3000/api/auth/google, my
CRA version is 2.1.3 It seems http-proxy-middleware is the only
working way. I have to Configuring the Proxy Manually
From the react doc:
If the proxy option is not flexible enough for you, you can get direct
access to the Express app instance and hook up your own proxy
middleware.
You can use this feature in conjunction with the proxy property in
package.json, but it is recommended you consolidate all of your logic
into src/setupProxy.js.
I've deployed my MEVN stack app to Heroku and can access it from my development machine. I can add and delete items on the mlab mongodb I have setup. If I try to access from my phone or another machine the website works but I can't see the data. I have searched and can't find anything related to this. I am afraid it is obvious but I don't see it. Below is the website link.
https://dry-earth-62210.herokuapp.com/#/users
import axios from 'axios'
export const http = axios.create({
baseURL: 'http://localhost:8080/api', //base URL goes here
})
As baseUrl, use 'https://dry-earth-62210.herokuapp.com/api' instead of 'http://localhost:8080/api'. You are good to go.
Right now you are trying to invoke local server from Heroku app and your local server is not available to the Heroku app.
Your API request code should be,
import axios from 'axios'
export const http = axios.create({
baseURL: 'https://dry-earth-62210.herokuapp.com/api', //base URL goes here
});
Also, make sure, your CORS is enabled for all sites or well configured. Otherwise, there might be some Cross-Origin Error issue.
Look at your API call - if you look at the request URL, it's pinging localhost:8080. You'll need to change this from the hardcoded localhost:8080 value to dynamically get the server's address. (This is probably where you're doing app.listen).
Feel free to post your main index.js file and I can take a closer look :)
My goal
I want to perform a request with axios#0.18.0 using an http proxy fully efficient (squid). My project is a vue project based on the webpack template. vue init webpack proxytest
The issue
When I try to perform the request, axios 'ignores' the proxy property inside the config object passed.
I noticed that when I run the exact same code with pure nodejs, everything works just perfectly fine.
Is there some configuration that I need to specify excepting the axios request configuration when using axios as a npm module within webpack ?
The code
import axios from 'axios';
const config = {
proxy: {
host: 'host',
port: 3128,
},
method: 'GET',
};
axios('http://www.bbc.com/', config).then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});
Of course, when testing, I change 'host' into the proxy IP.
I tried to change the method property to POST in order to check if axios considered the config. It does consider the config passed.
I tried to put a fake port so I could check if the proxy property was considered. It's not considered.
The output
output...
Now, I'm aware of what CORS is. The point is I'm constently getting this output when performing the requests. And if the proxy was used by axios, I think no CORS "error" would show up as my proxy is a VPS.
Thank you.
You need to configure your server to receive the requests and then test. This does not seem to have anything to do with the webpack, because in your mistake, for example, you make a request for the BBC from localhost and it is very likely that you are making that mistake. So it's important to test with your server by running Front and Back locally.