uni-app 支付宝小程序云客户端访问云对象url参数化报跨域错误,在支付宝小程序云配置跨域也会报错,阿里云正常

uni-app 支付宝小程序云客户端访问云对象url参数化报跨域错误,在支付宝小程序云配置跨域也会报错,阿里云正常

操作步骤:

https://jck.jumaker.com/client/slideshow/pub/getList?place=1&need_user_info=true

预期结果:

可以正常访问

实际结果:

Access to XMLHttpRequest at ‘https://jck.jumaker.com/client/slideshow/pub/getList?place=1&need_user_info=true’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

bug描述:

客户端 uni-app, 通过 http://localhost:8080 访问 url参数化 云对象会报跨域报错,在支付宝云小程序配了 localhost:8080, 只有支付宝云出现跨域问题,阿里云可以正常访问

Image Image


更多关于uni-app 支付宝小程序云客户端访问云对象url参数化报跨域错误,在支付宝小程序云配置跨域也会报错,阿里云正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

现在好了吗?

更多关于uni-app 支付宝小程序云客户端访问云对象url参数化报跨域错误,在支付宝小程序云配置跨域也会报错,阿里云正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以了

在处理uni-app开发支付宝小程序时,如果遇到云客户端访问云对象URL参数化导致的跨域错误,并且在支付宝小程序云配置跨域仍然报错的情况,通常这类问题涉及到小程序的权限配置和云服务的调用方式。由于支付宝小程序和微信小程序在云开发上有一些差异,处理策略也略有不同。以下是一个简化的代码示例和配置说明,帮助你理解和解决该问题。

1. 确保云函数配置正确

首先,确保你的云函数在阿里云控制台中已正确配置,并且拥有正确的权限访问云对象存储(OSS)。

2. 支付宝小程序云配置

支付宝小程序本身不支持像微信小程序那样的直接跨域配置。你需要确保你的云函数调用是通过支付宝小程序提供的云API进行的,而不是直接通过HTTP请求。

3. 使用uni-app的云函数访问OSS

在uni-app中,你可以通过云函数来间接访问OSS,从而避免跨域问题。以下是一个简单的云函数示例,用于从OSS获取文件:

// 云函数入口文件
const cloud = require('wx-server-sdk');
const OSS = require('ali-oss');

cloud.init();

const client = new OSS({
  region: '<your-oss-region>',
  accessKeyId: '<your-accessKeyId>',
  accessKeySecret: '<your-accessKeySecret>',
  bucket: '<your-bucket-name>'
});

exports.main = async (event, context) => {
  const { fileName } = event;
  try {
    const result = await client.get(fileName);
    return {
      success: true,
      data: result.content.toString('base64') // 或者其他处理方式
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
};

4. 在小程序中调用云函数

在小程序中,你可以通过uni.cloud.callFunction来调用上述云函数:

uni.cloud.callFunction({
  name: 'getOSSFile',
  data: {
    fileName: 'path/to/your/file.jpg'
  },
  success: res => {
    if (res.result.success) {
      // 处理文件数据,例如转换为图片显示
      const base64Data = res.result.data;
      // ...
    } else {
      console.error(res.result.error);
    }
  },
  fail: err => {
    console.error(err);
  }
});

结论

通过上述方式,你可以避免直接在支付宝小程序中进行跨域请求,而是通过云函数作为中介来访问云对象存储,从而绕过跨域限制。确保你的云函数和OSS配置正确,并且小程序端正确调用云函数。这种方法不依赖于小程序平台的跨域配置,更加稳定和可靠。

回到顶部