前言

项目中使用了从别的网站上面获取的图片url，在项目中展示报错

net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

从network中可以看到有请求报CORS

在这里插入图片描述

在这里插入图片描述

尝试过的方案（失败了）

  1. https://blog.csdn.net/G294992891/article/details/109279415

    这个博客列举了几种方案，我看评论有人说好用，但是我没成功

    1. 修改浏览器选项，这个不适用（因为我这边不可能让用我们项目的客户去做这个操作）

    2. 将图片转换为base64位编码（我尝试了，但是没成功）

    3. 设置img元素中的crossorigin属性（我试了也不行）

  2. iframe加载来解决跨域的问题

最后成功解决的方案

使用代理来绕过CORS，原文章如下

https://stackoverflow.com/questions/69243166/err-blocked-by-response-notsameorigin-cors-policy-javascript

就是在原url链接前面拼接：https://circumvent-cors.herokuapp.com/

并且需要加上crossorigin="anonymous"属性

demo代码如下

<!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>
# 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟