Nuxt.js+Capacitor生产APK中Axios代理请求失败问题咨询

1. Nuxt的proxy配置仅在**开发环境（nuxt dev）**生效：开发阶段Nuxt自带的开发服务器会将/api1/开头的请求转发到目标服务器，但执行nuxt generate生成静态文件后，应用仅包含纯前端资源，没有后端服务器处理代理转发逻辑。
2. Capacitor打包的APK运行在本地WebView中，此时window.location.origin为http://localhost，请求/api1/books会直接指向本地WebView的虚拟服务器（不存在对应路由），因此返回404错误。

办法一：区分环境配置Axios的baseURL #

移动端WebView默认不受浏览器CORS限制，可直接请求真实API地址，仅在开发环境保留代理：

1. 修改nuxt.config.js中的Axios配置：

export default {
  // ...其他配置
  axios: {
    baseURL: process.env.NODE_ENV === 'development' ? '/api1/' : 'https://server1.custom.com/'
  },
  proxy: {
    '/api1/': {
      target: 'https://server1.custom.com/',
      pathRewrite: { '^/api1/': '' },
    },
    '/api2/': {
      target: 'https://server2.custom.com/',
      pathRewrite: { '^/api2/': '' },
    },
  }
}

2. 请求时使用相对路径：

const results = await this.$axios.get('books');

（针对两个不同端点，可动态指定baseURL或创建多个Axios实例）

办法二：使用Capacitor原生HTTP插件替代Axios #

使用@capacitor-community/http插件发起原生HTTP请求，完全绕过WebView的CORS限制，无需代理：

1. 安装插件：

npm install @capacitor-community/http
npx cap sync

2. 在组件中调用：

import { Http } from '@capacitor-community/http';

// 请求server1的books接口
const getBooks = async () => {
  const response = await Http.get({
    url: 'https://server1.custom.com/books'
  });
  return response.data;
};

// 请求server2的接口示例
const getOtherData = async () => {
  const response = await Http.get({
    url: 'https://server2.custom.com/xxx'
  });
  return response.data;
};

办法三：后端配置CORS允许对应Origin #

若有权限修改后端，可配置CORS规则：

• 允许开发环境的http://localhost:3000和移动端的http://localhost访问
• 开发阶段可临时设置Access-Control-Allow-Origin: *（生产环境不推荐）

配置后，开发环境和APK均可直接请求真实API地址，无需代理。

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