uniapp h5 跨域问题怎么解决

在uni-app中解决H5跨域问题有多种方法,以下列出几种常见的解决方法:

  1. 使用代理:在项目的 vue.config.js 文件中配置代理,将请求转发到后端接口,解决跨域问题。示例代码如下:
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述代码表示将以 /api 开头的请求代理到 http://api.example.com

  1. 使用CORS(跨源资源共享):在后端接口中设置响应头,允许指定的域名访问接口。示例代码如下:
// 在后端接口的响应头中设置以下内容
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

上述代码中,将允许 http://example.com 域名的请求访问接口。

  1. 使用JSONP:JSONP是一种跨域获取数据的方法,可通过向后端接口发送一个包含回调函数名的请求来获取数据。示例代码如下:
// 前端代码
import jsonp from 'jsonp';

jsonp('http://api.example.com/data', { param: 'callback' }, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

// 后端接口返回如下格式的数据
callback({
  "name": "John",
  "age": 30,
  "city": "New York"
});

上述代码中,将通过 JSONP 的方式获取 http://api.example.com/data 接口返回的数据。

需要注意的是,以上方法适用于uni-app中的H5端,对于其他端(如小程序端)可能需要使用不同的解决方法。