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
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 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!
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,
)
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.
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
}
}
},
}