Access to api with certificate on localhost (vue.js app)
Question
I have vue.js app build with vue-cli. App is located at dev.example.com and the rest api is at dev.example.com/api/v1/. Backend add ssl certificate to protect dev. And now on localhost I get error 400 when I try to make a request to api. To access the dev domain i have p12 certificate. How can I configure vue.config.js or axios to continue local development?
<head>
<title>400 No required SSL certificate was sent</title>
</head>
<body bgcolor="white">
<center>
<h1>400 Bad Request</h1>
</center>
<center>No required SSL certificate was sent</center>
<hr>
<center>nginx</center>
vue.config.js:
module.exports = {
devServer: {
proxy: {
"/api/v1": {
target: "https://dev.exmpaple/api/v1",
changeOrigin: true,
pathRewrite: { "/api/v1": "" },
},
},
},
};
1 answers
solution1
0 ACCPTED 2021-08-23 19:00:42
Because you should generate your own cert and provide keys in config.
module.exports = {
devServer: {
https: {
cacert: './server.pem',
pfx: './server.pfx',
key: './server.key',
cert: './server.crt',
passphrase: 'webpack-dev-server',
requestCert: true,
},
},
};
Also, you can try to set https for automatic ssl generating.
devServer: {
https: true,
}
Webpack Version above v4.4.0+
In new webpack version https option was deprecated, you need to specify devServer.server.options to use own certificates:
module.exports = {
//...
devServer: {
server: {
type: 'https',
options: {
ca: './path/to/server.pem',
pfx: './path/to/server.pfx',
key: './path/to/server.key',
cert: './path/to/server.crt',
passphrase: 'webpack-dev-server',
requestCert: true,
},
},
},
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.