vue https下使用http接口
时间: 2023-10-24 08:09:11 浏览: 65
在 Vue 中使用 HTTPS 协议访问 HTTP 接口,需要注意以下几点:
1. 由于 HTTPS 为加密协议,而 HTTP 为明文协议,因此需要在服务端将 HTTP 接口通过 HTTPS 代理转发出去,从而实现加密通信。
2. 在 Vue 中,需要通过修改 axios 的配置项来实现 HTTPS 访问 HTTP 接口。可以通过设置 `axios.defaults.baseURL` 和 `axios.defaults.headers.common['X-Forwarded-Proto']` 来实现。
3. 如果访问的 HTTP 接口需要验证证书,需要在 axios 的配置项中设置 `httpsAgent` 选项。
下面是一个示例代码:
```javascript
import axios from 'axios';
axios.defaults.baseURL = 'https://example.com';
axios.defaults.headers.common['X-Forwarded-Proto'] = 'https';
axios.defaults.httpsAgent = new https.Agent({
rejectUnauthorized: true,
});
axios.get('/api/data').then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});
```
其中,`https.Agent` 是 Node.js 中用于 HTTPS 请求的代理对象,通过设置 `rejectUnauthorized` 选项为 `true`,可以验证证书的有效性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)