Vue3+vite+ts 本地访问正式服务器接口
时间: 2023-10-31 08:57:26 浏览: 116
vue3+vite+ts环境搭建步骤
5星 · 资源好评率100%
如果您想在本地开发环境中访问正式服务器的接口,您需要确保您的服务器已经开启了跨域访问(CORS)权限。如果您的服务器没有开启跨域访问权限,那么您将无法从本地访问服务器接口。
在您的 Vue3+vite+ts 项目中,您可以使用 axios 库来发起 HTTP 请求。为了在本地开发环境中访问正式服务器接口,您需要将 axios 的 baseURL 配置为正式服务器的地址。例如:
```javascript
import axios from 'axios'
const api = axios.create({
baseURL: 'http://your-server-url.com'
})
export default api
```
然后,您就可以在您的 Vue 组件中使用该 API 对象来发起请求了。例如:
```javascript
import api from './api'
export default {
async mounted() {
const response = await api.get('/some-api-endpoint')
console.log(response.data)
}
}
```
请注意,如果您的服务器没有开启跨域访问权限,您可能会遇到类似于 “Access to XMLHttpRequest at 'http://your-server-url.com/some-api-endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” 的错误。如果遇到这种情况,您需要在服务器端配置允许跨域访问。
阅读全文