React开发服务器PC端图片下载正常，同WiFi手机端无法下载求助

1. CORS跨域限制 #

React开发服务器（create-react-app默认配置）仅允许localhost相关请求来源。当手机通过IPv4地址访问时，请求的Origin为http://[你的IPv4]:3000，不在服务器的允许列表内，导致axios获取图片资源时被拦截。

解决方法：
修改开发服务器配置，放宽CORS限制：

• 在package.json中修改启动命令，让服务器监听所有网络接口：

"scripts": {
  "start": "HOST=0.0.0.0 react-scripts start"
}

• 若图片资源来自外部服务器，可在src/setupProxy.js配置代理：

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

module.exports = function(app) {
  app.use(
    '/图片接口前缀',
    createProxyMiddleware({
      target: 'http://图片服务器地址',
      changeOrigin: true,
    })
  );
};

2. 图片URL使用localhost地址 #

如果state.url是http://localhost:xxxx/xxx.jpg这类地址，手机访问时会将localhost解析为自身本地地址，无法访问电脑上的图片资源，导致axios请求失败。

解决方法：
将图片URL替换为电脑的IPv4地址，比如http://[你的IPv4]:3000/xxx.jpg，确保手机能正确请求到服务器上的图片。

3. 移动端浏览器兼容性问题 #

部分移动端浏览器对download属性或createObjectURL的支持有限，比如iOS Safari处理blob下载时需要特殊适配。

解决方法：
调整下载逻辑适配移动端：

export const downloadImage = async (state) => {
  try {
    let response = await axios.get(state.url, {
      responseType: "blob",
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", state.url.slice(18));
    link.setAttribute("target", "_blank");
    document.body.appendChild(link);
    // 模拟标准点击事件，适配移动端
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    link.dispatchEvent(clickEvent);
    // 延迟释放URL对象并移除元素
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
  } catch (err) {
    console.error(err); // 用error级别输出，便于手机控制台查看
  }
};

建议开启手机浏览器开发者工具（如Chrome远程调试）查看控制台错误，可更精准定位问题。

内容的提问来源于stack exchange，提问作者Nikon George