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': '' }
}
}
}
}
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?
My plan is to send the token to the server. I could do this script inside of the page.vue (and it's working fine):
mounted() {
this.socket = this.$nuxtSocket({
channel: "/",
auth: {
token: 'abc'
}
})
} // socket.handshake.auth.token = abc
But I need the options on the nuxt.config.js, here's my attempt :
io: {
sockets: [{
url: 'http://localhost:3000',
auth: {
token: 'abc'
},
}]
}, // socket.handshake.auth.token = undefined
Any help are appreciated!
Sorry if my question is unclear, anyway I solve it using built-in RuntimeConfig, and call it in page.vue. I'm not sure if it safe, but it's kinda solve my problem.
I created a Nuxt application that uses Auth0 as the login provider. When you log in, you get redirected to the callback page and then the auth module takes over and saves the login information in the state.
All works perfectly in Dev mode, but as soon as I generate code for production, the auth module no longer reacts to the callback and you are not logged in.
Generating in target server or static has no effect.
I'm set to mode=universal.
I tried to enable SSR or specifically disable it, to no effect.
I'm using
"nuxt": "^2.15.4"
"#nuxtjs/auth": "^4.9.1",
I've been fighting this thing for a week, and I've seen numerous threads that talk about this, but no one provided a solution.
Is this really a problem that was not dealt with in Nuxt? That pretty much kills the usefulness of the platform if it can't handle auth in production...
Does anyone have a way to solve this?
I'm willing to post my code, if it will help resolve this.
EDIT: here is my nuxt.config.js file:
export default {
mode: 'universal',
target: 'server',
css: [],
plugins: [
{ src: '~/plugins/vue-debounce.js' },
{ src: '~/plugins/modal-popup.js', ssr: false },
{ src: '~/plugins/editor.js', ssr: false },
],
components: true,
buildModules: ['#nuxtjs/eslint-module', '#nuxtjs/fontawesome'],
fontawesome: {
component: 'fa',
suffix: true,
icons: {
solid: ['faCaretDown', 'faCaretRight', 'faCaretLeft'],
regular: ['faFileAlt'],
},
},
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth',
],
axios: {
baseURL: 'http://localhost:9000/api/',
headers: {
common: {
Accept: 'application/json',
},
},
},
auth: {
strategies: {
auth0: {
domain: '<my domain>.eu.auth0.com',
client_id: '<client id>',
audience: 'https://<my domain>.eu.auth0.com/api/v2/',
},
},
redirect: {
callback: '/callback/',
logoutRedirectUri: '/login'
},
},
build: {
transpile: [],
},
}
Here is a repo that I've created that explains in depth how to setup the most setup auth0 connection flow: https://github.com/kissu/so-nuxt-docs-theme-auth-auth0
Please pay attention to the README.md and then, check how it works with your auth setup. Here is my section
nuxt.config.js
auth: {
redirect: {
callback: "/",
home: "/",
login: "/login",
logout: "/"
},
localStorage: false,
strategies: {
local: false,
auth0: {
domain: process.env.AUTH0_DOMAIN,
clientId: process.env.AUTH0_CLIENT_ID,
scope: ['openid', 'profile', 'offline_access'],
accessType: 'offline',
responseType: 'code',
grantType: 'authorization_code',
codeChallengeMethod: 'S256',
}
},
},
As for the target, if you're limiting the access to your app straight from the beginning, the best way to go is still
target: 'static',
ssr: false,
That way, it will not require any NodeJS server and will be SPA only. Indeed, there is no need to generate protected pages (by auth0) since the guy needs to be logged-in. And, it will not generate them because of the way #nuxt/auth works.
I found the problem.
I had implemented a non-standard header in Axios, like so:
axios: {
baseURL: 'http://localhost:9000/api/',
headers: {
common: {
Accept: 'application/json',
authentication: "<UUID code>"
},
},
}
I did it as a temporary way to secure the communication with the server, until I had Auth0 running, and I forgot to remove it.
As soon as I got rid of this header, it started working as expected.
I'm not sure why this would cause the fact that it worked in developer mode and not in generated code, but removing the line made it work in both.
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