foreword
The project uses the image url obtained from other websites, and displays an error in the project
net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200
networkIt can be seen thatCORS
Solutions Tried (Failed)
-
https://blog.csdn.net/G294992891/article/details/109279415
This blog lists several solutions. I read that some people said it was easy to use in the comments, but I didn’t succeed.
-
Modify the browser options, this is not applicable (because it is impossible for me to let customers who use our project do this operation)
-
Convert the image to
base64bitcode (I tried, but it didn't work) -
Set the attributes in the img element
crossorigin(I tried it and it didn't work)
-
-
iframeLoading to solve cross-domain issues
The last successful solution
Use a proxy to bypass CORS, the original article is as follows
It is splicing in front of the original url link:https://circumvent-cors.herokuapp.com/
and need to add crossorigin="anonymous"attributes
The demo code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>原来的图片：</h2>
<img crossorigin="anonymous" src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/118625310_142004080928947_7255151805884890350_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=1&_nc_ohc=k1LkuRPHcY4AX9Z5XOM&tn=9ewtCzEQZ94fvHio&edm=AOQ1c0wBAAAA&ccb=7-5&oh=00_AT-kXSj9_hZCGYtP_Faf_vrfk-tOeE9rI4Hftho1cAQWIA&oe=62C95B4D&_nc_sid=8fd12b" alt="无法显示">
<h2>使用代理服务器但没有使用crossorigin之后的图片：</h2>
<img src="https://circumvent-cors.herokuapp.com/https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/118625310_142004080928947_7255151805884890350_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=1&_nc_ohc=k1LkuRPHcY4AX9Z5XOM&tn=9ewtCzEQZ94fvHio&edm=AOQ1c0wBAAAA&ccb=7-5&oh=00_AT-kXSj9_hZCGYtP_Faf_vrfk-tOeE9rI4Hftho1cAQWIA&oe=62C95B4D&_nc_sid=8fd12b" alt="无法显示">
<h2>使用代理服务器并且使用crossorigin之后的图片：</h2>
<img crossorigin="anonymous" src="https://circumvent-cors.herokuapp.com/https://scontent-lax3-2.cdninstagram.com/v/t51.2885-19/275492568_522134272615106_2612620348864564664_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-lax3-2.cdninstagram.com&_nc_cat=1&_nc_ohc=oJg8gboQtZ4AX8QkaVt&edm=AOQ1c0wBAAAA&ccb=7-5&oh=00_AT_Oitif7D98aMPdcclG7bAr2I71gWlpoN7WnF4Ob1b0Vg&oe=62CA1568&_nc_sid=8fd12b" alt="无法显示">
</body>
</html>