Nuxt: wrong Axios base URL in client side API requsets - vue.js

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,

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

vue.config.js is not recognized- 404 error

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!

Vue 3 and cookies

I am building a frontend in Vue 3 and backend with fastAPI. I'd like to use httponly in the authentication process but I don't see in the browser that the cookie is received. I have checked with Postman the request to backend and I see the "set-cookie" with the data from backend.
Frontend:
Vue 3
Axios 0.18.1
url: 127.0.0.1:8080
Backend:
FastAPI
uvicorn
url: 127.0.0.1:8000
In the frontend the post message with Axios is like:
axios
.post(process.env.VUE_APP_API_URL + '/login', this.auth, {withCredentials: true})
.then(res => {
console.log(res.data);
})
.catch(e => {
console.log(e);
});
and in backend I configure explicit origins:
origins = [
"http://localhost",
"http://localhost:8080",
"http://127.0.0.1",
"http://127.0.0.1:8080",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
and when I return the response to frontend:
response.set_cookie(
key="Authorization",
value=f"Bearer {token}",
domain="127.0.0.1",
path="/login",
httponly=True,
secure=False,
max_age=1800,
expires=1800,
)
thanks for advance.
I have done the following changes and now it is working:
Frontend:
.env.development file:
NODE_ENV=development
VUE_APP_API_URL=http://localtest.me:8000
Backend:
origins = [
"http://localhost",
"http://localhost:8080",
"http://localtest.me",
"http://localtest.me:8080"
]
response.set_cookie(
key="Authorization",
value=f"Bearer {token}",
domain="localtest.me",
path="/",
httponly=True,
secure=False,
max_age=1800,
expires=1800,
)

CORS issue with Vue js

I used vuejs, with address http://localhost:8000.
When calling api, I get CORS error. Sid not succeed request headers
request
Domain from origin http://localhost:8080 has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
let headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': true,
};
You need to create a "vue.config.js" with proxy configuration.
Example :
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true
}
}
}
}
Three Options
Option 1. Edit Vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
ws: true,
changeOrigin: true
}
}
}
}
Option 2 (Temporary/Test use case)
Use Cors Plugin in chrome Eg- Moseif CORS
Degrade your chrome version less than 71
Use chromium or Canary Browser.
Option 3
Look into your server Cors allowed or not you can add plugin for python cors and annotation for java on server to allow this call.

Vue devServer proxy is not helping, I still get CORS error

I'm using #vue/cli 3.x and in my vue.config.js I have this:
devServer: {
proxy: {
"/api": {
ws: true,
changeOrigin: true,
target: "http://localhost:8080"
}
}
}
But I keep getting CORS error:
Access to XMLHttpRequest at 'http://localhost:8080/api' from origin
'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Any idea?
It looks like the problem was with the axios configurations.
I had this definition: axios.defaults.baseURL = "http://localhost:8080/api";
I changed it to axios.defaults.baseURL = "api";
and it works.
module.exports = {
...
devServer: {
proxy: {
"^/api": {
target: url,
ws: true,
changeOrigin: true
}
}
},
}