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
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
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,
I'm hosting my vueJS frontend on an apache server. Without running the apache just by calling "npm run serve" and visiting my page over http (https is enabled on express backend), I can successfully request to the backend.
When starting apache and visiting the page over https (self-signed SSL certificates), I can't send requests.
Firefox error:
Cross-source (cross-origin) request blocked: The same source rule prohibits reading the external resource on https://143.93.46.35:60702/user/login. (Reason: CORS request failed).
And chrome:
xhr.js:160 POST https://143.93.46.35:60702/user/login net::ERR_SSL_PROTOCOL_ERROR
I enabled https on my express backend like:
https.createServer({
key: fs.readFileSync('certs/apache-selfsigned.key'),
cert: fs.readFileSync('certs/apache-selfsigned.crt')
}, app)
.listen(nconf.get('port'), function() {
console.log(`App listening on port lalala! Go to https://localhost:3000/`)
});
Enabled cors in app.js like:
const cors = require('cors');
...
// Enable CORS (cross origin resource sharing)
app.use(cors({
credentials: true,
origin: true
}));
app.options('*', cors());
And the vue service which handles the axios calls is:
const apiClient = axios.create({
baseURL: `https://inf-education-47.umwelt-campus.de:60702`,
withCredentials: false, // This is the default
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
export default {
// user Endpoints
getUser (email) {
return apiClient.get(`/user/${email}`)
},
registerUser (user) {
return apiClient.post(`/user/register`, user)
},
loginUser (user) {
return apiClient.post(`/user/login`, user)
},
...
In apache I edited the vhost conf to enable cors like:
<VirtualHost *:80>
ServerAdmin webmaster#test.de
DocumentRoot /var/www/client/pvapp-client/dist
Header set Access-Control-Allow-Origin "*"
....
What can be the reason for the errors when hosting vue with apache over https?
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 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.