After introducing ALB, Mixed Content Error happened

The problem you are encountering has nothing to do with ALB, it is just a pass-through load balancer, listens on one port and forwards the requests to the target group as you configure.

Your requests are blocked by the browser due to the mixed content. As you understood you need to serve the contents using the same protocol either HTTPS or HTTP.

There are two possibilities that I can think of

1. Your application code/configuration is mixing up the content
2. Or your proxy server(Apache) is switching the protocol for your endpoints

The mixed content error is solved.There are problems in my http request codes in front-end to my Laravel server .

I found URL notation is not appropriate. I don't know why the wrong url notation leads mixed content error.

Example 1. There is a slash in the end of url.

bad:  /api/sample/to/laravel/good: /api/sample/to/laravel

Example 2. Notation of query parameter is not appropriate.

bad:  /api/sample/to/laravel/?param1=123good: /api/sample/to/laravel?param1=123

Thanks greatly to mozukuzuku. Your solution lead me to my solution. If you have AWS ALB in use and you just end the URL for the IFrame SRC with just the subdir name xxx.com/mmm or xxx.com/mmm/ both with no actual file name on the URL, the browsers will see this as mixed content as there is no content per se as no there is no file name. If you add index.asp or default.asp or your file name to the end of the URL, then the browsers will be happy and the mixed content message goes away (or it will show real CSP warnings, etc). There was no mixed content, the AWS ALB is just returning an answer that the browsers didn't link when the name of the file is not supplied.