利用ajax如何根据权限加载目录,AJAX 请求静态资源 权限问题

# AJAX 请求静态资源 权限问题

正常来说，我们项目中的静态资源都是可以直接访问的，但在商品说和巧匠项目中，我们对用户的素材(图片、视频、音频)都会做权限控制，用户在登录的情况下，如果是基于 `cookie` 认证的话，通过 `img、audio、video` 直接访问资源，请求都会自动携带 `cookie` ，是不会有什么问题；

但 有些时候 我们需要做一些资源的预加载(使用 ajax、fetch)，比如 巧匠中的 `图片、音频` 裁剪功能，我们本地开发时和服务器肯定不在同域，使用 ajax、fetch 预加载资源时会加载失败(提示没有授权)，初次遇到这个问题时，可能会比较懵，一个静态资源为啥需要授权，右键 new tab 又能打开；


## 解决方法：

1、原生 AJAX：

```

var xhr = new XMLHttpRequest()

xhr.open('GET', url)

xhr.withCredentials = true // 携带跨域 cookie

xhr.send()

```

2、jQuery：

```

$.ajax({

type: "GET",

url: url,

xhrFields: {

withCredentials: true // 携带跨域 cookie

},

success: function(data) {

}

})

```

3、axios：

```

axios.interceptors.request.use((config) => {

config.withCredentials = true // 携带跨域 cookie

return confi

}, (error) => {

return Promise.reject(error)

})

```

4、fetch

```

fetch(url, {

credentials: 'include', // 携带跨域 cookie

mode: 'cors', // 支持跨域请求

}).then(response => response.json())

```

> 其实还有一个类似的场景，使用 [FileSaver]([https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js)) 下载文件时，直接传一个 URL 也会出现这个问题，解决办法是，先手动下载成 `blob` 对象，然后再通过 `FileSaver` 保存；