uni-app请求接口跨域问题
时间: 2023-09-28 21:05:03 浏览: 130
对于uni-app中的跨域问题,可以通过以下几种方式解决:
1. 使用代理:在uni-app的配置文件vue.config.js中配置proxyTable,将请求代理到后端接口。示例代码如下:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com', // 后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
2. 后端设置CORS:在后端接口中设置CORS(跨域资源共享)头部信息,允许前端的跨域请求。示例代码如下(使用Node.js Express框架):
```javascript
const express = require('express');
const app = express();
// 设置CORS头部信息
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
// 处理接口请求
app.get('/api/example', (req, res) => {
// 处理业务逻辑
res.json({ message: 'Hello World' });
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
3. JSONP请求:如果后端接口支持JSONP,可以使用uni-app中的jsonp插件进行跨域请求。示例代码如下:
```javascript
import jsonp from 'jsonp';
// 发起JSONP请求
jsonp('http://example.com/api', { param: 'callback' }, (err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
});
```
以上是解决uni-app中跨域问题的常见方法,选择合适的方式进行解决即可。
阅读全文