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

CodePudding user response：

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 into 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