webpack 设置跨域代理 vue设置代理

刺骨的言语ヽ痛彻心扉 2022-12-26 13:28 279阅读 0赞

# Webpack Dev Server 代理 API #

我们的开发项目一般运行localhost：8080 但后端的接口部署在同源地址下，生产环境没问题，但是本地就不行了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
不是任何情况后端都支持跨域

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]

proxy是一个对象，每个属性都是代理规则  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]  
上面的changeOrigin，可以看看http![在这里插入图片描述][20201202074052272.png]

此时就被代理到了 git的用户接口了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]

devServer: { 
            contentBase:'./public',
            proxy: { 
                '/api': { 
                  // http://localhost:8080/api/users -> https://api.github.com/api/users
                  target: 'https://api.github.com',
                  // http://localhost:8080/api/users -> https://api.github.com/users
                  pathRewrite: { 
                    '^/api': ''
                  },
                  // 不能使用 localhost:8080 作为请求 GitHub 的主机名
                  changeOrigin: true
                }
              }
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/9b488539e4ad4fc08dd7c614572f0130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/6a6ceb56653e49559341b737e260b89a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/b1efb762df3b43f3bd0fa564af366a24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/4878ba7764334c6ca34177d5e5b37fd8.png
[20201202074052272.png]: /images/20221120/ad4c62c055ee4086897a2c4afac2745e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/bdd6d3dd58c546bea05975d701d7f31a.png