vue3请求跨域 strict-origin-when-cross-origin

### Vue3 中严格跨域策略 `strict-origin-when-cross-origin` 的解决方案 在处理 Vue3 应用中的跨域请求时，如果遇到 `strict-origin-when-cross-origin` 报错，通常是因为浏览器的安全机制阻止了不安全的跨域请求。以下是几种可能的解决方案： #### 1. 修改服务器端响应头 通过调整服务器端返回的 HTTP 响应头来支持跨域访问是一个常见的方法。可以设置以下 CORS 头部字段以允许特定域名或所有域名访问资源： ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization ``` 这些头部字段的作用分别是定义哪些源可以访问资源、允许使用的 HTTP 方法以及允许携带的自定义头部[^1]。 #### 2. 配置代理解决开发环境下的跨域问题 在 Vue CLI 或 Vite 开发环境中配置代理是一种简单有效的方式。对于 Vue CLI，可以在项目的 `vue.config.js` 文件中添加如下配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://example.com', // 后端接口地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 此配置会将前端发送到 `/api` 路径下的请求转发至目标服务器，并隐藏实际的跨域行为[^2]。 #### 3. 设置 Referrer-Policy 属性 可以通过修改 HTML 文档中的 `<meta>` 标签或者 HTTP 响应头来控制页面的 referrer 行为。例如，在 HTML 文件中加入以下标签可减少敏感信息泄露的风险： ```html <meta name="referrer" content="no-referrer"> ``` 该属性能够指定当从当前文档发起网络请求时如何传递 Referer 信息。 #### 4. 使用 JSONP (仅限于GET请求) 尽管现代应用较少采用这种方式，但对于只读数据获取场景下仍然适用。需要注意的是JSONP 不适用于POST 请求等复杂交互操作。 #### 5. 客户端代码优化 确保客户端发出的所有 AJAX 请求都设置了正确的选项。比如使用 Axios 进行 HTTP 请求时，需确认已正确配置基础 URL 和拦截器逻辑： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://example.com/api', timeout: 10000, }); instance.interceptors.request.use(config => { config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; return config; }); export default instance; ```