Ionic 3中如何上传并查看JSON文件以后续获取其数据？

嘿，我来帮你捋清楚这个问题～你现在遇到两个核心困扰：一是上传JSON文件后只能触发下载，没法直接读取里面的图片URL数据；二是跨域访问不同站点JSON时存在的差异问题，我分点给你说具体解决方案：

一、解决JSON文件仅能下载的问题 #

这个问题基本是服务器Content-Type配置错误导致的：浏览器识别到文件类型为“二进制流”时会触发下载，而非解析展示JSON内容。

• 调整服务器MIME类型配置：
  • 如果用Apache服务器，在项目根目录的.htaccess文件里添加：

    AddType application/json .json
    

  • 如果用Nginx服务器，在站点配置的types块里补充：

    types {
        application/json json;
    }
    

• 若使用的是类似临时站点的托管平台（这类平台常默认标记JSON为可下载资源），可以换个支持直接访问JSON的静态托管服务，或者变通处理：把JSON内容嵌入到静态JS文件中，写成全局变量：

  // 将JSON转为全局可访问的变量
  window.imageData = { "Images" : { "url": [ "https://images4.alphacoders.com/474/thumb-1920-47438.png", "https://images7.alphacoders.com/303/thumb-1920-303042.png" ] } };
  

  上传这个JS文件后，前端就能直接通过window.imageData读取数据了。

二、解决跨域访问JSON的差异问题 #

浏览器的同源策略会阻止不同域名下的前端页面直接读取JSON数据，这就是你说的“自身站点和其他站点JSON存在差异”的核心原因。这里给你两个靠谱的解决方案：

• 后端代理（推荐方案）：
  在你自己的服务器上写一个简单的代理接口，由后端去请求外部JSON文件，再把数据返回给前端。这样前端和接口是同源的，就不会有跨域限制。比如用Node.js的Express写个示例：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  // 前端请求这个代理接口获取数据
  app.get('/api/get-image-urls', async (req, res) => {
    try {
      const jsonResponse = await axios.get('你的JSON文件完整地址');
      res.json(jsonResponse.data);
    } catch (error) {
      res.status(500).json({ error: '获取图片数据失败' });
    }
  });
  
  app.listen(3000, () => {
    console.log('代理服务启动在3000端口');
  });
  

  前端就可以通过fetch('/api/get-image-urls')来获取数据了。

• 配置CORS（若托管平台支持）：
  如果你能控制JSON文件所在服务器的配置，可以开启CORS，允许你的站点域名访问。比如在Apache的.htaccess里添加：

  Header set Access-Control-Allow-Origin "你的站点域名"
  

  这样前端就能直接跨域请求这个JSON文件了。

三、验证方法 #

• 先测试JSON文件访问：在浏览器地址栏输入JSON文件的URL，如果浏览器直接展示格式化的JSON内容（而非下载），说明Content-Type配置正确。
• 测试跨域：用前端的fetch请求JSON地址，打开浏览器控制台查看是否有“CORS policy”相关错误，若无错误则跨域问题已解决。

内容的提问来源于stack exchange，提问作者Ali Abdulaal