不能访问生产api地址的问题

环境

1. nuxt项目
2. 生产环境接口api正常

问题

  axios: {
    baseUrl: 'http://xxx.com'
    proxy: true,
    prefix: '/api/',
    credentials: true
    // See https://github.com/nuxt-community/axios-module#options
    },
    proxy: {
    '/api/': {
      target: 'http://localhost:xxxx',
      pathRewrite: {
        '^/api/': '/',
        changeOrigin: true
      }
    }
  },

配置了nuxt.config.js, 本机开发可以访问到接口地址，显示正常， 打包构建之后访问就不正常

分析问题

• proxy：由于之前对proxy的理解， 是代理服务器， 使用于本机开发连接远程开发机接口
• 打包构建，本地启动，断开开发机api，提示接口不通，是什么原因呢？

在我的理解中是这样的， 设置了baseUrl， proxy是针对dev环境起作用的， 所以在npm run start之后，proxy部分应该不起作用了

那么访问的地址就变成baseUrl + url，这样的地址是可以访问， 但实际一直不成功。

于是就在网上寻找各种资料，各种尝试....

解决

1. 设置env,通过cross-env来设置变量

  "scripts": {
    "dev": "cross-env BASE_URL=http://localhost:xxx nuxt",
    "build": "cross-env BASE_URL=https://api.xxx.cn NODE_ENV=production nuxt build",
    "start": "cross-env BASE_URL=https://api.xxx.cn NODE_ENV=production nuxt start",
    "generate": "cross-env BASE_URL=https://api.xxx.cn NODE_ENV=production nuxt generate"
  },

2. 在nuxt.config.js中设置env

    env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:xxx'
  },

在经过以上2步的时候，进行尝试， 还是不成功， 非常郁闷了

3. 尝试axios拦截 单独写一个axios是可以成功访问的， 但是需要引入，不能通过this.$axios这样的方式引用，放弃了

它是新创建一个axios实例，不是nuxt自带的那个

最终解决

在经过思考后，尝试把proxy中的target也用process.env.BASE_URL替代

然后构建打包验证。。。

duang 居然成功请求到接口了,令人惊讶， 想不到生产环境也需要proxy吗

配置

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:xxx'
  },
  axios: {
    proxy: true,
    prefix: '/api/',
    credentials: true
    },
    proxy: {
    '/api/': {
      target: process.env.BASE_URL,
      pathRewrite: {
        '^/api/': '/',
        changeOrigin: true
      }
    }
  },