Taro开发H5跨域代理配置

2023年3月8日 799点热度 0人点赞 0条评论

 

在实际开发过程中,因为浏览器的策略限制原因,导致我们使用一些测试 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

帮助教程

提供最新的帮助教程,方便使用。

文章评论