要解决 Svelte 中的 Axios 请求跨域问题,可以在后端服务中添加跨域设置。以下是一个 Express 服务器的示例代码:
```js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // 添加跨域设置
app.get('/api/data', (req, res) => {
res.json({ msg: 'Hello from the server!' });
});
app.listen(3000, () => console.log('Server started!'));
```
在这个示例代码中,我们使用了 `cors` 中间件来添加跨域请求的设置,实现跨域请求。接着,我们添加了一个路由 `/api/data` ,可以在前端使用 Axios 来访问它,并获取返回的数据:
```html
<!-- MyApp.svelte -->
<script>
import { onMount } from 'svelte';
import axios from 'axios';
let data = [];
onMount(async () => {
const response = await axios.get('http://localhost:3000/api/data');
data = response.data;
});
</script>
<h1>{data.msg}</h1>
```
在这个示例代码中,我们使用了 Axios 来请求服务器中的 `/api/data` 路由,获取了返回的数据。注意到我们使用了 `http://localhost:3000` 来代表服务器地址,如果您的服务器地址不同,请修改对应的地址。
总之,在 Svelte 中使用 Axios 发送跨域请求需要在后端服务中添加跨域设置。同时,Axios 本身也提供了许多用于处理请求和响应的功能。通过组合使用这些功能,就可以方便快捷地实现前后端之间的数据交互。