vite中请求接口https://csm.sodsoft.cn/Learning/api/ProductManual/listAllClass,跨域怎么处理
时间: 2023-12-20 18:04:28 浏览: 183
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
在 Vite 中处理跨域请求有两种方式:
1. 通过 vite.config.js 配置文件设置代理
在项目根目录下创建 `vite.config.js` 文件,然后添加如下代码:
```javascript
module.exports = {
proxy: {
'/api': {
target: 'https://csm.sodsoft.cn',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/Learning/api')
}
}
}
```
这里设置了一个代理,将所有以 `/api` 开头的请求转发到 `https://csm.sodsoft.cn/Learning/api` 地址,其中 `changeOrigin` 参数表示是否改变请求头中的 Origin 字段,`rewrite` 参数表示重写请求路径。这样,我们就可以使用 `/api/ProductManual/listAllClass` 来请求数据了。
2. 在接口请求中添加 CORS 头信息
在请求接口时,通过添加 CORS 头信息来实现跨域请求。可以使用 `fetch` 函数或者 `axios` 库来发送请求,这里以 `fetch` 函数为例:
```javascript
fetch('https://csm.sodsoft.cn/Learning/api/ProductManual/listAllClass', {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': '*'
}
}).then(response => {
// 处理响应数据
}).catch(error => {
// 处理请求失败
})
```
在请求头中添加 `Access-Control-Allow-Origin: *` 字段,表示允许所有域名访问该接口。注意,这种方法需要服务器端也支持 CORS,否则无法正常访问。
阅读全文