前言
昨天开会和小伙伴聊到 Img引入图片报跨域的问题了。
刚听到这个问题，我沉思了，Img标签怎么会跨域？？？这让我感觉我好像还是不怎么了解同源策略和cors
我心理的想法如下：
1，
Img标签里引入的图片资源是其他网站的线上地址，也没看到跨域啊？2，
Img引入的线上地址本身是个Get请求，所以Get请求是没有跨域这一说法的。
不知道其他小伙伴的脑子里是不是这样的，反正我一直都是这样认为的~~~
之前也不知道是看了哪篇文章，有了这样的想法。
其实是错误的，或者说不严谨的
于是，翻了很多资料，开了十几个Tab页，最后把获取到的知识点汇总下放在这里。
正文开始
Img标签跨域问题其实还分两个场景~~~
HTML中的Img标签
这种场景引入的图片资源是其他网站的线上地址，的确不会跨域，如下图
- 是因为
Img标签的加载是通过HTML的静态资源加载机制实现的，不会涉及AJAX请求。
JS中的Img标签
这种场景，创建一个Img放在canvas中是会有跨域问题的，可参考十分钟实现一个图片拾色器，🎉我可以了，如下图
研究了下，在MDN上发现CORS 默认是不被使用的。
进行资源请求时没有完全访问的权限，所以在跨源请求的情况下，根据相关元素的类型进行访问限制，也就是被污染了。
意思是canvas不允许没加CORS的东西在它的地盘摆摊，需要加crossorigin（交保护费）。
crossorigin 属性在 <audio>、<img>、<link>、<script> 和 <video>元素中有效，它们提供对 CORS 的支持，提供CORS 标头，携带用户标识。
img.setAttribute("crossOrigin", "")开启CORS, 支持跨域请求。
js
var img = new Image();
// var img = document.createElement("img");
var url = "https://img1.baidu.com/it/u=1649605650,3527686615&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=422";
img.src = url + "?" + new Date().getTime();
img.setAttribute("crossOrigin", "");总的说，上面那几个标签本身都不是通过XMLHttpRequest或者AJAX去请求的，涉及不到跨域问题。
但是在某些特定元素中比如canvas，需要满足人家的规则所以要加上crossOrigin来解决问题。
下面给大家延伸点小知识。
延伸：跨域问题里的三个知识点
总的来说，跨域问题通常会涉及到三个知识点：请求方式、同源策略和CORS
1，请求方式
-
通过
HTML的静态资源加载机制实现的，不会涉及AJAX请求，所以不会触发跨域问题。 -
通过
XMLHttpRequest或Fetch API发起的AJAX请求，叠加同源策略中不同源的场景就会触发跨域问题了（即使是Get请求也会触发跨域，Get请求是没有跨域这一说法的是错误的）
2，同源策略
同源策略是浏览器的核心安全策略（服务器不受同源策略影响，服务器和服务器之间不存在跨域），限制了来自不同源的网页之间的访问，目的是为了保护用户的隐私和网站的安全。
不同源：协议、域名、端口号任意一个不同即为不同源。
下图是关于同源策略的栗子，图中不允许的都会触发跨域问题。
3，CORS
CORS 是一种机制，通常用来解决跨域。通过前端 或者 服务器的配置来允许跨域访问服务器的资源和通信。
CORS的验证流程：
-
前端发送跨域请求：
- 浏览器会在请求头中添加一个
Origin字段，表示请求的来源（即当前网页所在的域名）。
- 浏览器会在请求头中添加一个
-
后端响应：
-
响应头：后端在响应头中添加一些
CORS相关的头部字段。-
Access-Control-Allow-Origin：指定允许访问的域名、通配符*表示允许任意域名的访问。 -
Access-Control-Allow-Methods：指定允许的 HTTP 方法。例如：GET、POST、PUT、DELETE 等。 -
Access-Control-Allow-Headers：指定允许的请求头。例如：Content-Type、Authorization 等。 -
Access-Control-Allow-Credentials：true/false 是否允许携带凭证信息（如 Cookie、HTTP 认证等）。 -
Access-Control-Expose-Headers：指定允许暴露的响应头，允许前端获取的响应头字段。
-
-
-
前端接收响应：
-
浏览器检查响应头是否存在
Access-Control-Allow-Origin字段，值是否与请求域名匹配。-
匹配，浏览器允许前端获取服务器返回的数据；
-
不匹配，浏览器会拒绝访问服务器返回的响应数据，阻止前端访问。
-
-
CORS的配置通常需要后端的配合，这也是解决跨域最常用的方案。
后端配置:
js
// java
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.setAllowCredentials(true);完结
这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。
欢迎转载，但请注明来源。
最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。
