前端图片在需要canvs重绘时出现跨域‘Access-Control-Allow-Origin‘

随心，随行

已于 2023-02-17 21:36:16 修改

阅读量459

点赞数

分类专栏：跨域文章标签：服务器运维前端

于 2023-02-17 21:21:07 首次发布

原文链接：https://blogyl.xyz/article/def1bfb5-2b20-4e6b-b431-e57788115833

版权

跨域专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.何为跨域

跨域是浏览器的同源策略，不同域名，端口，协议，都会出现跨域的问题。当然浏览器也有支持跨域的一些标签，例如：script,link,img等。

2.图片出现跨域的情况

一般图片只有在需要获取图片源进行重绘才会出现跨域。例如，使用htmlcnavs，还有使用一些插件，截图等。

3.解决方法

3.1自己服务器上的图片

这种情况只要在请求头中添加允许跨域即可

Access-Control-Allow-Origin *;
Access-Control-Allow-Credentials: true;

3.2其他地址的图片

如果没有出现跨域，肯定是对方服务器已经设置了允许跨域。出现跨域，这种情况就需要把域名转成自己服务器的域名就可以了，例如我是gitee的图片链接https://gitee.com/yulinzhu/pic-window/raw/master/1.jpg，我们需要转成 本地域名/get_image/yulinzhu/pic-window/raw/master/1.jpg
图片链接就处理好了，但是这是还不能访问，需要nginx进行代理，代码如下：

location ^~ /get_image/ {
  add_header 'Access-Control-Allow-Origin' '$http_origin' always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;
  add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-  Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
  proxy_pass https://gitee.com/;
}

转载自blogyl.xyz