I'm a bit noob to network stuff, i'm not using vite (what ever was that), i've just created a simple proxy server in order to proxy to my vue site, i've searched tons of pages and didn't get the solution and yes when u guys see the error it will look simple, trust me i've checked the old endpoint URL znd it matches the resulting URL of the proxy, they point to the same place
this is the code to fetch the server:
async fetchtasks() {
const res = await fetch("api/tasks");
const data=res.json()
return data;
},
code in vue.config.js:
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:5000',
changeOrigin: true,
pathRewrite: { '^/api': '/api' },
logLevel: 'debug',
ws: true,
},
},
}
};
when i use 'http://localhost:5000' it works well but after i replace it with api it returns the "unexpected token < in json error", i know it's an html page, how do i get rid of it? the code is right, and i've tried different tweaks... nothing worked
module.exports = {
devServer: {
proxy: {
'^/api': {
target: process.env.VUE_APP_BASE_URL_API,
pathRewrite: { '^/api': '' }
}
}
}
}
Related
all,
I am writing a front-end of my app, using Vue. I need to request some information from the back-end, launched on the same server.
I added proxy like this:
module.exports = {
devServer: {
port: 2611,
proxy: {
'/api/markets/light': {
target: 'http://localhost:2610/markets/light',
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/api/markets/light': '/markets/light',
},
},
},
},
}
(I've tried different combinations of the parameters, like excluding pathRewrite, '^/api/...' instead of '/api/...', etc.)
This is how data is requested from the code:
created() {
axios.get(this.$store.getters.marketsLightLink)
.then(response => this.markets = response.data)
.catch(error => console.log(error));
}
marketsLightLink simply concatenates strings:
const store = new Vuex.Store({
state: {
marketDataHost: '/api',
markets: {
markets: '/markets',
marketLight: '/markets/light',
},
},
getters: {
marketsLightLink(state) {
return state.marketDataHost + state.markets.marketLight;
},
},
});
So when i open the page, where i should see the results of the request, i just see 404 error in the browser's console and no data downloaded. At the same time I see, that the link is proxied correctly:
[HPM] Rewriting path from "/api/markets/light" to "/markets/light"
[HPM] GET /api/markets/light ~> http://localhost:2610/markets/light
And when i press the resulting link, the requested information is shown in the browser.
Can anyone help me, what am I doing wrong please?
I cannot seem to get the devServer: proxy setting working in my vue / express app.
My vue.config.js file is in the root of my client folder and looks like:
module.exports = {
devServer: {
proxy: {
'api': {
target: 'http://localhost:5000'
}
}
},
transpileDependencies: [
'vuetify'
]
}
I'm sending a request from the frontend using axios like this:
const response = await http.get("/api/auth/authenticate");
My express app is running on localhost:5000 and I've configured endpoints as such:
...other endpoints
app.use("/api/auth", authController);
The request appears in my network tab as:
Request URL: http://localhost:8080/api/auth/authenticate
and returns a 404 error.
What am I missing here?
Since now it is not fetching from your backend, but searching for some static content (hitting 8080, vue must be running on this port). Try using, so that it get redirected to proxy:
proxy: {
'^/api': {
target: 'http://localhost:5000',
ws: false,
changeOrigin: true
},
Or just '/api' instead of '^/api'
I have been searching and reading thru documentation on this topic but I was unbale to make it work.
https://cli.vuejs.org/config/#devserver-proxy
I made my Vue.js application normaly by the commnand
vue create my-app
so I'm running the app by command
npm run serve
on http://localhost:8080/. Pretty standart stuff.
But my app needs a PHP backend which is running at https://localhost/
So I setted up the proxy setting in vue.confic.js file in my root directory.
Content of vue.confic.js file:
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'https://localhost/',
ws: true,
changeOrigin: true
}
}
}
};
And I'm trying to make axios call for the script on the adress
https://localhost/test.php
The axios call is
mounted() {
this.$axios.get('api/test.php', {})
.then(response => { console.log(response.data) })
.catch(error => { console.log(error) });
},
But for some reason which i cant figure out I'm still getting
GET http://localhost:8080/api/test.php 404 (Not Found)
Thank you in advance. I'll be happy for any tips.
Your axios call is going to make the request to the API with whatever protocol the webpage is on.
The error shows that you’re making an http call but your webpack config is only spoofing https. Are you visiting https from the page making the request?
Eg https://localhost:8080
You can also try updating your webpack proxy server to look like this
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
Additional debug steps: curl your Api endpoint from your terminal to see if it’s a protocol issue
you can try
https: true,
proxy: {
'/api': {
target: 'https://localhost/',
ws: true,
changeOrigin: true
}
}
before try, restart by npm run serve to make it sense
I am having issues when making a client request.
I have followed the documentation on Nuxt.js and Axios but I still can't seem to get it working. Maybe I am missing something..
My Vue component calling the vuex action:
methods: {
open() {
this.$store.dispatch('events/getEventAlbum');
}
}
The action in vuex:
export const actions = {
async getEventAlbum(store) {
console.log('album action');
const response = await Axios.get(url + '/photos?&sign=' + isSigned + '&photo-host=' + photoHost);
store.commit('storeEventAlbum', response.data.results);
}
};
And my nuxt.js.config
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api/': {
target: 'https://api.example.com/',
pathRewrite: { '^/api/': '' }
}
}
Anybody who can help?
I believe the issue that #andrew1325 is trying to point out is that the API provider needs to have the CORS enabled, not just your server, without changing the headers in your proxy, you're passing the same headers, which at the moment prevent access.
It seems to me that you're only missing changeOrigin
please try the following config:
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api/': { target: 'https://api.example.com/', pathRewrite: {'^/api/': ''}, changeOrigin: true }
}
also make sure that your front-end API url is pointing to your proxied request /api
I want to get the data from http://localhost:5438/api/change?id=123 when visiting http://localhost:8080/change/detail/123, but it's not working when using history mode.
The dev config
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://127.0.0.1:5438/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
The router config
{
path: '/change/detail/:id',
name: 'ChangeDetail',
component: ChangeDetail
}
ChangeDetail
this.$axios.get('api/change?id=' + id)
.then(response => {
......
})
However, I find the url axios is actually calling is,
http://localhost:8080/change/detail/api/change?id=123 instead of http://localhost:8080/api/change?id=123
But when I turn off the history mode, everything is fine when the url is turned to http://localhost:8080/#/change/detail/123.
So what's wrong? Please help me to find a solution for this. Thanks in advance.