后台接口返回的图片地址为oss地址，导致跨域问题

Question

后台接口返回的图片地址为oss地址，导致跨域问题，截图时无法截到图片，根据调用后台接口的base64转化后，截图可以截到图片但是又出现新的问题，文件流过大加载过慢，有什么新的解决方法吗

 
// 截图无法截图片，oss与本地图片转换方法
function imgBase1(apptype, appimgcode, appimg_url){
    $.ajax({
      type: 'POST',
      url: commonurl + 'getPictureBase64',
      data: JSON.stringify({"url":appimg_url}),
      timeout: 30000,
      dataType: 'json',
      contentType: "application/json",
      success: function (data) {
        imgUrl(apptype, appimgcode, data.picture);
      }
    })
 
}
function imgUrl(type, code, url) {
  switch (code) {
    case "9043_0":
      vm.arry9043[0].photo_url= url
    break;
    case "9043_1":
      vm.arry9043[1].photo_url = url;
    break;
    case "9043_2":
      vm.arry9043[2].photo_url = url;
    break;
  }
}

 //  query/appinfo加载信息接口
$(function () {
    $.ajax({
        url: commonurl + 'query/appinfo',
        data: JSON.stringify(data),
        type: 'POST',
        timeout: 30000,
        dataType: 'json',
        contentType: "application/json",
        headers: securityHeaders,
        success: function (data) {
            if (data.result_code == "0") {
                 if (benes.photo_ral) {
        if (benes.photo_ral.length > 0) {
            switch (num) {
                case 0:
                    vm.arry9043 = benes.photo_ral;
                    for (key in vm.arry9043) {
                        if (vm.arry9043[key].photo_code == "9043_0") {
                            arry_9043[0].url = vm.arry9043[key].photo_url;
                             //  imgBase1方法
                            var benimg30_code= vm.arry9043[key].photo_code
                            var benimg30_url= arry_9043[0].url
                                if(crs_product_verify=="Y"){
                                    imgBase1(bentype, benimg30_code, benimg30_url)
                                }
                        }
                        if (vm.arry9043[key].photo_code == "9043_1") {
                            arry_9043[1].url = vm.arry9043[key].photo_url;
                            //  imgBase1方法
                            var benimg30_code= vm.arry9043[key].photo_code
                            var benimg31_url= arry_9043[1].url
                                if(crs_product_verify=="Y"){
                                    imgBase1(bentype, benimg30_code, benimg31_url)
                                }
                            // crs结束
                        }
                        if (vm.arry9043[key].photo_code == "9043_2") {
                            arry_9043[2].url = vm.arry9043[key].photo_url;
                            // crs修改地址
                            var benimg30_code= vm.arry9043[key].photo_code
                            var benimg32_url= arry_9043[2].url
                                if(crs_product_verify=="Y"){
                                    imgBase1(bentype, benimg30_code, benimg32_url)
                                }
                        }
                    }
                    break;
             }
        }
    }
}
}）
}）

//保存接口，跳转下一步
function saveajax(data) {
  $.ajax({
    url: commonurl + 'save/appinfo',
    data: JSON.stringify(data),
    type: 'POST',
    timeout: 30000,
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
      if (data.result_code == "0") {
        //  crs 税收居民
        crs_verify = data.crs_verify
        crs_url = data.crs_url
        if (vm.iscrs == '1') {
          jtfuction("4")
        }
        if (crs_verify == 'Y') {
           // 取消imgBase1方法
        }
        
      }
    },
  })
}
 

Answer 1

【以下回答由 GPT 生成】

由于后台接口返回的图片地址为oss地址，导致跨域问题，可以使用代理服务器来解决。通过在代理服务器上进行请求，并将请求结果返回给前端，避免跨域问题。

以下是使用Node.js搭建一个简单的代理服务器的解决方案：

1. 首先，在项目中安装express和http-proxy-middleware两个包。

npm install express http-proxy-middleware

1. 在项目根目录下创建一个proxy.js文件，并添加如下代码：

const express = require('express');
const {createProxyMiddleware} = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
  target: 'http://后台接口地址',  // 将后台接口地址替换成实际的地址
  changeOrigin: true,
}));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

1. 在终端中执行以下命令启动代理服务器：

node proxy.js

1. 修改原本的JavaScript代码，将ajax请求的URL修改为代理服务器的地址。例如：

url: 'http://localhost:3000/api/getPictureBase64',

1. 重新运行代码，测试是否解决了跨域问题。

请注意，在使用代理服务器时，需要将target中的地址替换为实际的后台接口地址。此外，还需要确保代理服务器能够正常运行，并且前端代码中使用的URL都经过了代理。

如果以上解决方案不适用于你的情况，请提供更多关于后台接口和前端代码的信息，以便我能够提供更准确的解决方案。如果你还有其他问题，请随时提问。

【相关推荐】

• 这篇博客: 网络图片转成base64操作，解决图片跨域问题中的 oss图片转成base64操作 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^