The solution to the inability to take screenshots under the second-level domain name of html2canvas

1. The picture in the red box in the web interface is a picture called across the second-level domain name, as shown in Figure 1

Figure 1

2. The source code of the web page, the picture address in the red box is the second-level domain name relative to the current web page address, as shown in Figure 2

Figure 2

3. The screenshot of the team’s logo has disappeared based on the screenshot of Html2Canvas, as shown in Figure 3

Figure 3

4. Access:http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png, the response is shown in Figure 4

Figure 4

5. Since the image server is nginx, it is set to allow cross-domain access, and restart nginx, as shown in Figure 5

Find the server item in nginx.conf and add the following configuration:
add_header access-control-allow-origin *;

Figure 5

6. Visit again:http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png, the response is shown in Figure 6

Figure 6

7. Add 2 lines to the screenshot code of js: allowtaint: true, usecors: true, as shown in Figure 7

Figure 7

8. The screenshot is successful, and the problem that Html2Canvas cannot be taken under a cross-second-level domain name has been solved, as shown in Figure 8

8

9. This solution, even cross-top-level domain names, is supported, as shown in Figure 9

Figure 9