I have a small frontend on vue on localhost: 8080, which with the help of axios gets data from localhost: 1234
At the same time, the certificate is self-signed on localhost: 44306, so it has to be periodically added to exceptions:
In firefox, this addition is valid for a day, it seems. I specifically do not add it to the exceptions on an ongoing basis, because I want to display a normal notification when logging in: they say, "the self-signed certificate is on the backend" or the certificate is on the backend. Especially this second error here interests me directly, I want to catch it beautifully and show it to the user.
However, with default settings, axios does not show that the certificate is self-signed and untrusted, no! For him - "server off"!
And this misdiagnosis just kills me. Those. One thing is when users could call and say "sertum rotten", and here is a fundamentally wrong message that the first line of technical support will only confuse, letting go on the wrong track.
What to do? Which way to go?
From the fact that he dug up from daily observations.
It is known that when there is a request for a backend, first there is a test OPTIONS request, which first simply tests whether the server is alive, whether it can be accessed (cross origin policy), etc. And only after that comes the real POST request:
If the certificate is expired, then as soon as OPTIONS falls off, POST is not done (and this is logical), but for some reason this first OPTIONS at the top looks like the server is unavailable, and not as a certificate expired.
In chrome, the same situation, I checked to clear my conscience, although I do not use chrome, because It does not show all requests.
The code is trivial, just in case:
import axios from 'axios'; import { API_URL } from '@/config/config'; import store from '@/store'; const ApiService = { init() { ApiService.AxiosReq = axios.create(); axios.defaults.headers.common.Authorization = `Bearer ${store.state.auth.token}`; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.baseURL = API_URL; }, post(resource, params) { return ApiService.AxiosReq.post(resource, JSON.stringify(params)); }, get_error(error) { if (error.response) { if (error.response.status === 400) { return 'Неверный логин и/или пароль.'; } if (error.response.status === 401) { return 'Истёк срок токена. Нажмите Logout, затем войдите снова.'; } if (error.response.status === 403) { return 'Недостаточно прав для выполнения этой операции.'; } return error.response.status; } if (error.request) { return 'Сервер недоступен. Попробуйте позднее.'; } return error.message; }, }; export default ApiService; Error handling done on the model at the axios office.
In error, there is nothing to catch on - only the general "Network error"
