Quasar Cordova构建后Axios请求返回404问题求助

针对Quasar + Cordova构建后Axios请求返回404、本地开发正常的问题，结合日志信息和技术栈版本，可从以下几个方向排查：

1. Cordova内容安全策略（CSP）限制 #

Cordova Android默认的CSP可能拦截了外部域名请求，导致请求未实际发送到服务器，返回浏览器端的假404。

• 解决步骤：
  修改config.xml中的CSP meta标签，明确允许访问目标域名：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://velvet.globexfrance.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  

  确保CSP规则包含目标API域名，避免过严限制。

2. Axios URL拼接异常 #

虽然日志显示baseURL和url组合正确，但Cordova的file://协议环境下，相对路径解析可能与本地dev的http://环境存在差异，导致实际请求URL错误。

• 解决步骤：
  • 强制Axios使用完整URL，或确保baseURL末尾带斜杠、请求url开头不带斜杠：

    const axiosInstance = axios.create({
      baseURL: 'https://velvet.globexfrance.com/', // 末尾保留斜杠
      // 其他配置项
    });
    // 请求时使用：axiosInstance.post('api/registration-stages', data)
    

  • 添加请求拦截器打印最终请求URL，确认实际发送地址：

    axiosInstance.interceptors.request.use(config => {
      console.log('实际请求URL:', config.baseURL + config.url);
      return config;
    });
    

3. Android网络权限与代理问题 #

• 检查config.xml是否添加了必要的网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  

• 测试设备若开启代理，可能导致请求无法到达目标服务器，关闭代理后重试。

4. 服务器端请求过滤 #

服务器可能对Cordova/Android的User-Agent或请求头进行了限制，导致请求被拒绝返回404。

• 解决步骤：
  • 显式设置Axios的User-Agent，模拟浏览器请求：

    axiosInstance.defaults.headers.common['User-Agent'] = 'Mozilla/5.0 (Linux; Android 10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36';
    

  • 使用抓包工具（如Charles）捕获Cordova设备的实际请求，对比本地请求的头信息、URL是否完全一致。

5. 构建环境变量差异 #

检查Quasar构建时的环境变量配置，确保Cordova构建使用的baseURL与本地dev一致，避免构建过程中变量替换错误。

• 查看quasar.conf.js或.env文件，确认生产构建（Cordova）的环境变量与开发环境匹配。

内容的提问来源于stack exchange，提问作者Michael Saban