has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ 前后端设置跨域问题解决过程

经过多次遇到坑,找了很多资料,有nginx配置,前端页面添加,等但是这些都没有解决遇到问题,下面是本人遇到的情况并解决步骤过程,希望看到对你有所帮助:

开发页面渲染生成海报,并保存   问题原因:

解决过程:
1:通过查询诸多资料:nginx代理配置域名新增(这个是大部分建议的结果):

   location ^~ /third_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://image.XXX.com/
       }

配置了之后,前端读取还是一样的效果不可以,提示跨域问题,没有效果,没有解决,

2种设置情况在前端页面直接加 crossOrigin="anonymous"

以上这种情况也还是不能解决图片跨域的问题出现,

 

3:第三种情况是直接在js,中 img.setAttribute('crossOrigin', 'anonymous') 设置之后终于可以实现解决方案,

下面是设置的截图:

前端html页面设置:

最后实现了解决效果展示: