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
Related
When fetching to an external API with the following proxy settings, I get the json response and everything is fine, but only when served locally with npm run serve. When I build the app with npm run build (also with --mode development) and then launch the app from /dist, I get this message in the 304 response.
We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue
So my promise is empty and also I get this error: Unexpected token < in JSON at position 0.
I also tried to build it into a docker image and I get the same error.
vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "" : "",
devServer: {
proxy: {
"^/todos": {
target: "https://jsonplaceholder.typicode.com",
changeOrigin: true,
secure: false,
pathRewrite: { "^/todos": "/todos" },
logLevel: "debug",
},
},
},
};
component.vue
async function fetchData() {
try {
fetch(`/todos/1`)
.then((response) => response.json())
.then((messages) => {
console.log("messages: ", messages);
});
} catch (err) {
console.error("err", err);
}
}
I'm using node v17.9.0 (npm v8.7.0) and latest version of #vue/cli
I think this problem follows this one on netlify API from proxy not working after deploying on netlify
I am setting up a Vite app and making an axios api request in my app component
getSuggestionList(street, zip, city) {
this.axios.get('/1.0/address/find?country=at&zip=' + zip + '&city=' + city + '&street-address=' + street + '&street-number=&offset=1&limit=100', {
auth: {
username: '7166-631A-5394-4C03-9106-0A93-C433-2613',
password: ''
}
})
Now, for development I configured a proxy in server
in vite.config.js
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
proxy: {
'/1.0/address': 'http://api.opendata.host/'
}
},
proxy: {
'/1.0/address': {
target: 'http://api.opendata.host/',
changeOrigin: true,
secure: false,
ws: true,
}
}
});
Following this guide
https://rubenr.dev/en/cors-vite-vue/
I understand this does not transfer to production, so I also tried the proxy part. I don't get a response, just like described in the netlify guide.
From Heroku docs
https://github.com/heroku/heroku-buildpack-static
I have the basic setup without proxies (leading to the initial, no-response behavior)
in static.json:
{
"root": "./dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
},
"proxies": {
"/1.0/address": {
"origin": "http://api.opendata.host/"
}
}
}
And when I add proxies I get a 404 not found. When I change up the spelling: no response again, so it seems to be making a connection with the proxies configuration. But why not they way it works locally? Does anyone see my error here or having something for me to try?
I found it: for anyone else having trouble with this kind of deployment on Heroku -- the mountpoint "/1.0/address" in static.json seems to be replaced resulting in the 404 not found.
For production I added a prefix /api in my axios call, something like
var apiPath = '/1.0/address/find?country=at&zip=' + zip + '&city=' + city + '&street-address=' + street + '&street-number=&offset=1&limit=100'
var prodMountpoint = '/api' // /api/
if (import.meta.env.PROD) {
apiPath = prodMountpoint + apiPath
}
This results in a correct api call: "/api" is replaced with the proxied host, if I understand correctly. For development, the vite.config.js does its work as before.
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': '' }
}
}
}
}
I'm using vue.js with a flask server.
The 8080 vue.js dev env forwards axios queries to port 80 , cause my python flask server is always running on port 80, waiting for web services calls.
This is my vue.js vue.config.js file :
module.exports = {
outputDir: "dist",
// relative to outputDir
assetsDir: "static" ,
devServer: {
proxy: 'http://localhost:80'
}
};
everything works except that Im getting sock-js infinite loops, especially when developping on port 8080 :
How can I stop theses queries, please .
I there any way to only forwards AXIOS queries to port80, not the others things ?
https://github.com/webpack/webpack-dev-server/issues/1021
EDIT : Tried this with no luck
vue.config.js :
module.exports = {
outputDir: "dist",
// relative to outputDir
assetsDir: "static",
devServer: {
proxy: {
"^/api": {
target: "http://localhost:80"
}
}
}
};
error :
Error: Request failed with status code 404
EDIT : Hey Guys, finally resolved with this code , simply write this in your vue.config.js at the root of the vue.js app, so the wrong sockjs-node queries will get ignored, only web services will be forwarded :
module.exports = {
outputDir: "dist",
assetsDir: "static",
devServer: {
proxy: {
"/api": {
target: "http://localhost:80"
}
}
}
};
Then, do an axios query from vue.js like this :
const path = '/api/read_linear_solution';
axios.post(path, this.form)
Then, in ur python or node server , the web service must look like this 👍
#app.route('/api/read_linear_solution', methods=['POST'])
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'