1. The image in the red box on the web page is called from a cross second-level domain, as shown in Figure 1.
2. In the web page source code, the image address in the red box is a second-level domain relative to the current web page address, as shown in Figure 2.
3. In the screenshot taken using html2canvas, the team logo has disappeared, as shown in Figure 3.
4. Access http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png, and the response is shown in Figure 4.
5. Since the image server is Nginx, configure it to allow cross-origin access and restart Nginx, as shown in Figure 5.
Find the server block in nginx.conf and add the following configuration inside it:
add_header Access-Control-Allow-Origin *;
6. Access http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png again, and the response is shown in Figure 6.
7. Add two lines to the JS screenshot code: allowTaint: true, useCORS: true, as shown in Figure 7.
8. The screenshot is successful, and the issue of html2canvas failing to capture screenshots across second-level domains is resolved, as shown in Figure 8.
9. This solution also works for cross top-level domains, as shown in Figure 9.
