解决跨域问题 has been blocked by CORS policy 后续，原理解析篇

解决跨域问题 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present ———————————————— 版权声明：本文为CSDN博主「士多碧莉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_40647516/article/details/102660374a

这篇文章是我一年前写的，当时也没给大家解释清楚当中的原理，今天一看30多万浏览量，还是有必要跟大家说一下的（当然也不一定能解释清楚，本人水平有限 QAQ）

首先说到跨域之前，跟大家聊一下同源，简单的来说，同源要求“三个相同”

• 协议相同
• 域名相同
• 端口相同

目的是为了防止攻击者窃取信息，XSS攻击，CSRF攻击等。如果不同源的话，会导致以下几种请求受到浏览器限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

 同源问题可以参考这篇文章：浏览器的同源政策和规避方法

第一个问题：解决CANVAS画布污染问题。

造成canvas画布污染的原因是，你使用的图片和你的站点不同源，canvas默认不允许跨域，如果需要使用其他域名的图片则需要修改配置，给图片添加 crossOrigin属性。

我使用第三方的图片来绘制画板，自然违反了同源规则了，报错画布污染。于是，由于我使用的框架是html2canvas，其中一项配置是 useCORS （是否允许跨域），只要配置为true即可。使用原生canvas的则需要配置你的图片（img标签或者image对象）添加一个属性 crossOrigin即可。

canvas画布污染问题可以参考这篇文章：使用图像 Using images

accrossOrigin属性值配置可以参考这篇文章：HTML attribute: crossorigin

至此解决了canvas的画布污染问题。

第二个问题：解决跨域资源问题。

Access to image at 'http://192.168.14.128:8000/static/china.png' from origin '127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

图片开启了以跨域方式请求资源后，又违反了浏览器的同源要求。这是由于我们使用跨域方式请求图片，然而服务端http响应没有设置对应的允许跨域响应头 Access-Control-Allow-Origin。这会导致浏览器直接报错，如上图access to image has been blocked。

那么问题来了，这个资源并不在我们服务器上呀，我们也设置不了HTTP响应头呀，怎么办？答案是使用nginx反向代理。

我的文章也给出了教程。

1. 首先，第三方域地址替换为我们自己的域地址。
2. 然后在服务器设置反向代理地址，proxy_pass给真正的服务。
3. 最后添加HTTP响应头  Access-Control-Allow-Origin，配置允许跨域资源请求，这样浏览器识别到服务器允许跨域，才不会报错。

至此，跨域的问题也解决了。成功把第三方的图片资源渲染到我们的canvas画布上，大功告成。

 有需要了解更多跨域技术可以参考这篇文章： ​​​​​​​​​​​​​跨源资源共享（CORS）

最后总结：

        作为一个互联网人，我觉得应该人人都要了解学习同源，跨域技术，解决问题的同时需要知道原理。这篇文章主要跟大家聊一下：为什么会造成canvas画布污染，如何解决canvas画布污染，为什么会造成跨域问题，如何解决跨域。

        希望这篇文章可以帮助到大家。