Taro开发H5跨域代理配置

在实际开发过程中，因为浏览器的策略限制原因，导致我们使用一些测试 api 时，老是提示cors的考验问题，非常不方便；而小程序、iOS、Android等程序是不会有这个问题的。

我们以IMDB接口为例

此接口有短时间重复请求的限制
https://api.wmdb.tv/movie/api/generateimage?doubanId=1306123

接口来源：GitHub：https://github.com/iiiiiii1/douban-imdb-api

不需要重写路径的情况下：

// config/dev.js

module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  defineConstants: {

  },
  mini: {},
  h5: {
    devServer: {
      proxy: {
        '/movie': {
          target: 'https://api.wmdb.tv',
          changeOrigin: true
        },
      }
    }
  }
}

数据请求

    try {
      Taro.request({
        url: '/movie/api/generateimage',
        data: {'doubanId': 1306123},
        header: {
          'Content-Type': 'application/json'
        },
      }).then(res => {
        console.log(res);
      })
    } catch (e) {
      Taro.showToast({
        title: '载入远程数据错误'
      })
    }

启动配置（默认）

"dev:h5": "npm run build:h5 -- --watch"

⚠️：修改配置文件时，一定要重新启动项目，不要偷懒。

需要重写路径的情况下：

跨域代理配置（我故意将movie写成了movia，来测试地址重新功能是正常的）

// config/dev.js

module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  defineConstants: {

  },
  mini: {},
  h5: {
    devServer: {
      proxy: {
        '/movie': {
          target: 'https://api.wmdb.tv',
          pathRewrite: { '^/movia': '/movie' },
          changeOrigin: true
        },
      }
    }
  }
}

数据请求

    try {
      Taro.request({
        url: '/movia/api/generateimage',
        data: {'doubanId': 1306123},
        header: {
          'Content-Type': 'application/json'
        },
      }).then(res => {
        console.log(res);
      })
    } catch (e) {
      Taro.showToast({
        title: '载入远程数据错误'
      })
    }

启动配置（默认）

"dev:h5": "npm run build:h5 -- --watch"

⚠️：修改配置文件时，一定要重新启动项目，不要偷懒。

webpack文档：https://webpack.docschina.org/configuration/dev-server/#devserverproxy

关于跨域：https://developer.mozilla.org/zh-CN/docs/Glossary/CORS