vue.config.js is not recognized- 404 error - vue.js

Vue config file is not recignized and throws a 404 error. Based on this tutorial: https://www.youtube.com/watch?v=W-b9KGwVECs
vue.config.js
const path = require("path");
module.exports = {
devServer: {
proxy: {
//if usere requests /api path, then we add a proxy for localhost5000
// If your frontend app and the backend API server are not running on the same host,
// you will need to proxy API requests to the API server during development.
"^/api": {
target: "http://localhost:5000",
changeOrigin: true,
pathRewrite: { "^/api": "/" },
},
},
},
};
It is at the root of my frontend folder. My Vue cli version is #vue/cli 4.5.6
Originally I used this url which connected the frontend and backend perfectly
const url = "http://localhost:5000/api/posts/";
Is there anything I'm missing? Thanks!

Related

Backend api call not working in Vue(front)

My environment
front - windows, port 3000
backend - linux (ubuntu) in docker container, port 5000
Vue(front) tsconfig.json
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
host: true,
port: 3000,
proxy: {
"/api": {
target: "http://127.0.0.1:5000",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
front api call code
const response = await axios.post("http://127.0.0.1:5000/users/login?email=" + code);
backend(Nestjs) - main.ts
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: 'http://localhost:3000',
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
credentials: true,
});
await app.listen(5000);
}
bootstrap();
I expect the api call to go to the backend, localhost:5000
but i get a 404 error
When I tried with postman, I got normal return, but when I sent the request using axios in Vue with the same request, I got 404 not found.
The most incomprehensible thing is that with the current settings, it was normally requested when developing in the past.
I don't know how to fix this
please help a lot
Repositories currently being edited: https://github.com/PracticeofEno/ft_transcendence
thanks
omg... I send POST message..
But api is GET Message

Proxy to SSL Endpoint with webpack-dev-server proxy

I am trying to do an axios GET request in vue3:
vue.config.js
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: 'https://example-url.com/',
}
})
Request.js
const url = "http://localhost:8080/example/.../"
When sending the request I am getting the following error:
400 (Bad Request)
The origin of the 400 (Bad Request) is a missing SSL certificate, which I am getting asked for in the browser when accessing https://example-url.com/example/.../ without the proxy (results in CORS policy error).
Why am I not getting asked for a client certificate when accessing the api via the proxy?
How can I configure my request that I am getting asked for a client certificate?
Solution for appending SSL Certifcate in webPack devServer Proxy
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy: {
'^/api': {
target: {
protocol: "https:",
host: "base-url",
port: 443,
pfx: fs.readFileSync('pfxFile.pfx'),
passphrase: 'your-passphrase',
},
changeOrigin: true,
}
}
}
})
Request URL then needs to go to e.g. http://localhost:8080/api

Nuxt: wrong Axios base URL in client side API requsets

I have set axios Base_url like this in Nuxt config
axios: {
baseURL: process.env.API_URL,
},
the problem is that when i requset api in client side, axios uses default base_url ,
i mean it sends requests to http://localhost:3000/ not to my backend server .
But for requests in server side everything is ok .
the below pic shows client side request .
Try setting Up proxy for the APIs . (In network tab the url will show up as it is shown in the question image)
axios: {
baseURL: process.env.API_URL, // Must be base url
proxy: process.env.NODE_ENV === 'development'
}
proxy:
process.env.NODE_ENV === 'development'
? {
'/': {
target: process.env.API_URL,
changeOrigin: true,
logLevel: 'debug',
secure: false
}
}
: false,

How to transform perfect devServer config file for production server. Because locally no error and after deploy cors error

The below code is working fine locally on chrome and firefox without installing the cors plugin. However, when I create a build and place a static file to a production server droplet at /var/www/html It's not working. Please let me know how to change this config file for production and I don't get cors error as well. like not getting cors or any error locally.
This is my vue.config.js file:
module.exports = {
devServer: {
proxy: {
"/one": {
target: "https://etherscan.io/",
pathRewrite: { "^/one": "" },
},
"/two": {
target: "https://bscscan.com/",
pathRewrite: { "^/two": "" },
},
},
},
};
Moreover, This is the request:
this.$http
.get("http://localhost:8080/one/token/" + this.contractAddress, {
mode: "no-cors",
header: {
"Access-Control-Allow-Origin": "http://localhost:8080/",
},
gzip: true,
})
The second request in the same component is:
this.$http
.get("http://localhost:8080/two/token/" + this.contractAddress, {
mode: "no-cors",
header: {
"Access-Control-Allow-Origin": "http://localhost:8080/",
},
gzip: true,
})
Error after deployment, when I open deployed app by IP address:
Then I tried to replace http://localhost:8080 to http//:localhost in URL and at access control allow origin I placed http://ip or server/ Then Error

API Proxying vuejs

The code is on github
The following example API Proxying During development
gives an example of a proxyTable
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
under which they say,
The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.
but clearly posts/1 is missing from the example.
Or should the /posts/1 be in the proxyTable or in the .vue file using axios like this,
axios.get("api/posts/1")
so that a HTTP GET request which starts with api with proxy to http://jsonplaceholder.typicode.com and then append the rest of that url, which in this case is /posts/1 and so it actually proxies to http://jsonplaceholder.typicode.com/posts/1
Is this correct?
----------EDIT FROM HERE DOWN------------
In my own case
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /conn to http://localhost:8081
'/conn': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/conn': ''
}
}
}
}
}
and
axios.get("/conn/api.php?action=read")
should proxy to,
http://localhost:8081/api.php?action=read
But I get a console error,
GET http://localhost:8080/conn/api.php?action=read 504 (Gateway Timeout)
Thanks