webpack配置接口地址代理

zyf1910

于 2021-02-18 16:21:36 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript vue.js 文章标签： javascript vue.js webpack

本文链接：https://blog.csdn.net/Jeo_blue/article/details/113847727

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

vue.js

6 篇文章

订阅专栏

本文介绍了在本地开发环境中，为了解决跨域问题，如何通过webpack配置接口地址代理，包括在webpack.config.js中的设置以及在vue-cli中的proxyTable配置方法。详细讲述了配置过程并提到了修改dev环境的baseUrl。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在实际项目中，本地开发环境请求服务器接口地址的时候，会存在跨域问题，解决跨域问题，可以关闭浏览器跨域限制，或者使用webpack-dev-server的proxy代理

第一种方式，前面有文章介绍过：各浏览器开启跨域模式
现在说明第二种方式：

1、在webpack.config.js中配置

devServer: {
    ...
    proxy: {
      '/service-core': {
         target: 'https://test.******.org', // 接口的域名
         secure: false,  // 如果是https接口，需要配置这个参数
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      }
    }
  }

2、vue-cli中proxyTable配置接口地址代理

修改config/index.js

proxyTable: {
   '/service-core': {
      target: 'https://test.******.org', // 接口的域名
      secure: false,  // 如果是https接口，需要配置这个参数
      changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
   }
}