Can't send a axios request from https to http server

Question

The frontend of my project is on the https protocol and the server side is on the http protocol, I cannot send an axios request to the server

Use MERN stack. (React on typescript)

Axios http.ts

export const $api = axios.create({
    withCredentials: true,
    baseURL: process.env.REACT_APP_SERVER_URL
})

Axios request function

static async CreateOrder(data: IOrder): Promise<AxiosResponse<IOrder>> {
    return $api.post<IOrder>('/test', data)
};

On the localhost all works without errors. But after deploating to the server and domain, I get an error

Mixed Content: The page at 'https://xxxxxxxxxx.netlify.app/place' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://0.00.000.00/test'. This request has been blocked; the content must be served over HTTPS.

Uncaught (in promise) Fo {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

This request is blocked by chrome, but it is correct to send a request from https to https, but I want to disable this and be able to send to http

Answer 1

You can't do requests from https to http because it's a security feature to prevent attackers/hackers from intercepting and modifying the insecure HTTP content and this behavior is called as mixed content blocking. You can read more to understand with more details in this article .

But to help you try these options:

1. You can avoid it putting your webserver as https instead of http.
2. Use ngrok or another service (maybe your own service) to proxy your http server into a https
3. Disable mixed content blocking from your browser