HTML 跨域属性

跨域是指在浏览器同源策略的限制下，一个网页无法通过Ajax等方式与不同源的服务器进行交互。HTML提供了一些跨域属性和技术，让我们可以在一定程度上解决跨域问题。

跨域属性

img标签的跨域属性

crossorigin属性

crossorigin属性可以在img标签上设置，它允许加载一个来源于外部域名的图片时获取该图片的响应头（如content-type、cache-control等），并允许 Canvas 的 toDataURL 方法将其图片转换为 base64 编码。其允许值有：

• anonymous：不会发送 cookies 或者其他用户验证信息到服务器，即匿名访问。
• use-credentials：会发送 cookies 或者其他用户验证信息到服务器，需要服务器支持并允许。

<img src="http://example.com/image.png" crossorigin="anonymous">

script标签的跨域属性

crossorigin属性

crossorigin属性可以在script标签上设置，它允许跨域加载一个JavaScript文件，并允许BYOB（异步二进制）响应类型，以便在非同源文档中读取数据。其允许值与上面crossorigin属性相同。

<script src="http://example.com/script.js" crossorigin="anonymous"></script>

link标签的跨域属性

crossorigin属性

crossorigin属性可以在link标签上设置，它允许跨域加载一个CSS文件，并允许从被链接资源文件中获取Origin头信息。其允许值与上面crossorigin属性相同。

<link rel="stylesheet" href="http://example.com/style.css" crossorigin="anonymous">

CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享）是现代化浏览器用来解决跨域问题的一种技术。它通过在服务器端添加一些响应头信息来实现跨域访问。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET
Access-Control-Max-Age: 86400
Access-Control-Allow-Headers: *

例如，在服务器端设置Access-Control-Allow-Origin头信息为*表示允许来自所有域名的跨域请求。

JSONP

JSONP（JSON with Padding）是一种跨域访问的解决方案。它通过在客户端加入一个<script>标签来获取跨域请求的数据，服务器返回一段JavaScript代码，客户端再执行这段代码进行回调，以实现跨域访问。

<script src="http://example.com/data.php?callback=handleData"></script>
<script>
function handleData(data) {
  // 处理返回数据
}
</script>

总结

HTML提供了一些跨域属性和技术，但并不是所有跨域问题都可以完全解决。开发人员需要根据实际情况选择最合适的解决方案。