crossorigin
属性用于指定如何处理跨域请求,特别是在加载外部资源(如图片、字体或脚本)时。它主要用于 <link>
和 <img>
标签以及一些其他 HTML 元素。该属性的作用是定义浏览器如何处理 CORS(跨域资源共享)请求。
crossorigin
属性的取值和作用
anonymous
use-credentials
作用:请求会包含凭证(如 Cookies 和 HTTP 认证信息),用于需要身份验证的资源。要求服务器在响应头中包含 Access-Control-Allow-Credentials: true
。
示例:
<link rel="stylesheet" href="styles.css" crossorigin="use-credentials">
<img src="image.jpg" crossorigin="use-credentials">
用途:用于需要用户认证的资源,例如需要登录的内容。
如何工作
- 资源请求:当浏览器请求跨域资源时,会根据
crossorigin
属性的值决定是否发送凭证。
- 响应头:服务器需要在响应头中设置 CORS 相关的头信息(如
Access-Control-Allow-Origin
和 Access-Control-Allow-Credentials
),以允许资源被成功加载。