case:
In the React project, I want to realize the function that the user downloads the authentication information of the work in the form of a picture through the pop-up box. When clicking to display the authentication information, request the work information (obtain the path of the picture) from the server, and then render the picture and related information to the pop-up box ( the green part in the figure below ), click the download button to download ( the blue part in the figure below ). The requested image can be displayed, but it cannot be displayed when downloaded
question:
1. Open the console at this time and find that there is such an error:
× Access to image at '服务器上图片地址' from origin '请求图片的地址' has been blocked by CORS policy： No 'Access-Control-Allow-Origin' header is present on the requested resource
Meaning > The request has been blocked by CORS policy: No "Access Control Allow Origin" header is present on the requested resource.
2. There is also a "CORS error" error in the network column
3. Check that the corresponding response header does not have "Access Control Allow Origin"
4. At this time, I probably know that it is a cross-domain problem, but I have not found a fundamental solution
After reading many articles, you need to start from the following aspects
(1) Set up cross-domain issues where html2canvas is used (that is, add useCORS: true ) [Adopted]
(2) Convert the image to base64 and then take a screenshot or download it [ Already Use]
(3) Add the crossorigin="anonymous" attribute in the img tag;
(The front end can refer to this article: The realization of the download function and related settings )
[But the main problem is that the resources we get do not have response headers, and the resources are intercepted by the
browser . Fields added for resources]
solve
Finally, the backend adds a response header to the resource, and adds the address that allows the resource to be requested at Access-Control-Allow-Origin:, which is the address that needs to download the picture mentioned above.
This successfully fetches and downloads
(Note) Another way is to configure the proxy mentioned in the official html2canvas document. Here, the project team tried to use nginx to set up cross-domain requests, but the expected effect was not achieved. Maybe it was a method problem, so the above method was adopted accomplish
Reference article:
Cross-source resource sharing (CORS)
uses html2canvas to generate images on the front end.
The solution for html2canvas to process cross-domain images
records the front-end poster drawing of html2canvas. The drawing fails due to cross-domain images, and the downloaded poster does not have network images. The problem is purely front-end solution