解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present

野性酷女 2024-03-03 05:23 178阅读 0赞

说一下做项目时需要用到html2canvas做项目截图踩到的跨域坑。

项目需要拉取用户的头像，而linkedin和微信的头像存放于cdn中，这边涉及到的跨域问题。

坑1：

由于跨域， 画布被污染，不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。

按网上说的做，

配置 useCORS: true,

Nginx添加请求头

add\_header Access-Control-Allow-Origin \*;  
add\_header Access-Control-Allow-Credentials: true;

成功解决了画布被污染的问题。然而这种解决方法只可以解决你自己服务器的问题，你总不能去微信或其他第三方服务器添加请求头吧。。。更大的坑来了

坑2：

被对方服务器拒绝图片请求。

Access to Image '[https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX' has been blocked from origin '127.0.0.1:8000'

尝试了各种方法，包括

在img标签上添加*cross*origin = "anonymous"；

前端页面设置<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />；

Nginx设置 add\_header Cache-Control no-store;

都没有成功。

最后还是由Nginx解决，分两部步

第一步：

首先将服务器保存的第三方cdn链接

‘[https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX’

保存为 ：

"本地域名/third\_image[/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX"

访问第三方的域名涉及到跨域，但是访问本地的其他资源文件夹是OK的。

第二部：

然后在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://media.licdn.com/;  
\}

也就是：

把 [https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX  
保存为 [https://本地域名/third\_image/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX

最后由Nginx代理为 [https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink\_100\_100/0?e=1573689600&v=beta&t=8TqbDk8iWC][https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]XXXXXXXXXXXXXXXXXXXXX

完美解决！眼泪都要掉下来了，太感人了

[https_media.licdn.com_dms_image_C5603AQHCky1Ku581hg_profile-displayphoto-shrink_100_100_0_e_1573689600_v_beta_t_8TqbDk8iWC]: http://www.voidme.com/link?url=https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWChXsTCS2quHm9iMyBGBkcNwS4MODBcxPFU