---
title: "CORS 和安全属性"
description: "配置跨源凭据、引用者策略和脚本完整性检查。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/docs/guides/cors"
last_updated: "2026-08-11T09:33:10.173Z"
---

- 是否随请求发送 cookie
- 访问错误详情以便调试
- 子资源完整性（SRI）验证

从外部域加载脚本时，脚本元素的 [`crossorigin` 设置](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin)决定浏览器是否使用跨源资源共享（CORS）。对于第三方脚本，这会影响：

- 浏览器是否随请求发送 cookie
- 是否能够访问错误详情以便调试
- 子资源完整性（SRI）验证

## 默认行为

Nuxt Scripts 对跨源脚本应用以隐私保护为重点的默认设置：

```html
<script
  src="https://example.com/script.js"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
```

这些属性分别具有不同的作用：

- **crossorigin="anonymous"**：防止脚本请求发送跨源凭据，包括 Cookie
- **referrerpolicy="no-referrer"**：防止向第三方服务器共享页面 URL

某些供应商的脚本需要 Cookie 或引用来源信息，因此这些默认设置并不兼容每个端点。

## 常见 CORS 错误

### 脚本加载失败

```text
跨源请求被阻止：同源策略不允许读取远程资源
```

当服务器未返回适当的 `Access-Control-Allow-Origin` 标头，但设置了 `crossorigin="anonymous"` 时，就会发生这种情况。某些第三方脚本不支持 CORS。

### 脚本加载但功能失败

脚本已加载，但功能出现故障，因为它需要 cookie 或会话数据。

### 错误详情被隐藏

```js
window.onerror = (msg) => console.log(msg)
// 显示为："脚本错误。" 而非实际错误信息
```

未设置 `crossorigin` 时，出于安全考虑，浏览器会隐藏来自外部脚本的错误详情。

## 配置 CORS 属性

### 针对单个脚本的配置

禁用不支持 CORS 属性的脚本：

```ts
useScript({
  src: 'https://example.com/script.js',
  crossorigin: false, // 移除 crossorigin 属性
  referrerpolicy: false, // 移除 referrerpolicy 属性
})
```

或者使用不同的 `crossorigin` 值：

```ts
useScript({
  src: 'https://example.com/script.js',
  crossorigin: 'use-credentials', // 发送请求时带上 cookie
})
```

`crossorigin` 和 `referrerpolicy` 字段是脚本输入属性，因此请针对每个脚本进行配置。它们不属于 `defaultScriptOptions`。

## Crossorigin 值说明

<table>
<thead>
  <tr>
    <th>
      值
    </th>
    
    <th>
      跨源凭据
    </th>
    
    <th>
      错误详情
    </th>
    
    <th>
      使用场景
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        anonymous
      </code>
    </td>
    
    <td>
      不发送
    </td>
    
    <td>
      如果服务器允许该来源，则可用
    </td>
    
    <td>
      注重隐私的默认设置
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        use-credentials
      </code>
    </td>
    
    <td>
      如果浏览器策略允许，则浏览器会发送凭据
    </td>
    
    <td>
      如果服务器允许凭据和请求来源，则可用
    </td>
    
    <td>
      需要身份验证的脚本
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      是否发送凭据由浏览器 Cookie 策略决定
    </td>
    
    <td>
      隐藏
    </td>
    
    <td>
      不支持 CORS 的脚本
    </td>
  </tr>
</tbody>
</table>

## 注册脚本

某些注册表定义会禁用 `crossorigin`，以兼容其供应商：

```ts
const config = {
  scriptInput: {
    src: 'https://js.stripe.com/basil/stripe.js',
    crossorigin: false,
    referrerpolicy: false,
  }
}
```

具有 `crossorigin: false` 的脚本包括：

- Stripe
- YouTube 播放器
- Usercentrics
- Ahrefs 网站分析
- Google 登录
- Google reCAPTCHA
- Meta Pixel
- TikTok Pixel
- X（Twitter）Pixel
- Snapchat Pixel
- LinkedIn Insight Tag
- Cloudflare 网站分析
- Lemon Squeezy
- Calendly
- Matomo Analytics
- Bing UET

如果注册表脚本在网络层失败，请结合响应的 CORS 标头检查这些属性。

## 子资源完整性

对于跨源资源，[子资源完整性要求进行 CORS 检查](https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity)。使用[带有 SRI 的捆绑脚本](/docs/api/nuxt-config#assetsintegrity)时，Nuxt 会自动添加 `crossorigin="anonymous"`：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  scripts: {
    assets: {
      integrity: true, // 会自动设置 crossorigin="anonymous"
    }
  }
})
```

## 故障排除

### 脚本无法加载

1. 检查浏览器控制台中是否存在 CORS 错误
2. 设置 `crossorigin: false` 以禁用 CORS 模式
3. 确认第三方服务器支持 CORS 标头

### 脚本加载但功能异常

1. 脚本可能需要 Cookie；尝试使用 `crossorigin: 'use-credentials'`
2. 脚本可能需要引用来源；设置 `referrerpolicy: false`
3. 检查脚本是否要求在不带 CORS 属性的情况下加载

### 调试外部脚本错误

查看外部脚本的完整错误信息步骤：

1. 确保脚本具有 `crossorigin="anonymous"`
2. 确认服务器返回适当的 `Access-Control-Allow-Origin` 标头
3. 如果服务器不支持 CORS，则无法获取详细错误信息

### 将打包作为替代方案

[将脚本打包](/docs/guides/first-party)会将初始请求转移到您自己的域名，此时不再需要进行跨域脚本处理。