Get请求没有跨域问题？😇十分钟再了解下同源和CORS吧

前言

昨天开会和小伙伴聊到 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);

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。

最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。