如何绕过 net::ERR_FAILED 200答案

【问题标题】：How to get around net::ERR_FAILED 200如何绕过 net::ERR_FAILED 200
【发布时间】：2022-04-15 00:06:09
【问题描述】：

所以基本上我在这里做的是嵌入，将其复制到画布上，然后尝试将所述复制的背景更改为透明。它确实可以工作，但由于 net:ERR_FAILED 200 而不是在浏览器中。

CORS 政策已阻止从原点“null”访问“https://clearoutside.com/forecast_image_small/50.70/-3.52/forecast.png”上的图像：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。

有什么办法可以解决这个问题？

<!DOCTYPE html>

<html lang="eng">


<head>
    <meta charset="UTF-8">
    <meta nameset="viewport" content="with=device-width, initial-scale=1.0">
    <title>ClearOutside</title>

    <style type="text/css">
        body {
            background-color: transparent;

            -ms-zoom: 0.5;
            -moz-transform: scale(0.5);
            -moz-transform-origin: 0 0;
            -o-transform: scale(0.5);
            -o-transform-origin: 0 0;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: 0 0;
        }
    </style>

</head>

<body style="background-color:Blue">
    <a href="https://clearoutside.com/forecast/50.70/-3.52">
        <img id="forecast" crossorigin="anonymous" src="https://clearoutside.com/forecast_image_small/50.70/-3.52/forecast.png" /></a>
    <canvas id="myCanvas" width="505" height="41">


        <script>
            document.getElementById("forecast").onload = function(_) {
                const canvas = document.getElementById("myCanvas");
                const context = canvas.getContext("2d");
                const image = document.getElementById("forecast");
                context.drawImage(image, 0, 0);

                const WHITE = 0xFF;
                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                const {
                    data
                } = imageData;
                for (let i = 0; i < data.length; i += 4) {
                    if (
                        WHITE === data[i] &&
                        WHITE === data[i + 1] &&
                        WHITE === data[i + 2]
                    ) {
                        data[i + 3] = 0x00;
                    }
                }
                context.putImageData(imageData, 0, 0);
            };
        </script>


</body>

</html>

所以也许让我自己的服务器负责下载图像，但是我不知道如何设置这样的东西，因为我对编码很陌生。

【问题讨论】：

标签： javascript html proxy html5-canvas embed

【解决方案1】：

您必须为您正在使用的 API 设置 CORS

【讨论】：