webpck-dev-serve proxy 能这样设置吗???

image.png

image.png

proxy 之前只设置过path 类似'/api'这样的路径
能设置带https的域名吗。

因为dev上域名是https://dev.xxx.com的
我想通过https://dev.xxx.com/mock 的路径代理访问本地的mock数据。
然后在接口层 传一个isMock参数, 如果为true 就给url前面加上/mock走mock,如果未false 那就走真实路径 就不会走代理。

但是这样设置 ,发现并没有反向代理到localhost
这是为什么,哪里有错吗?

已解决 悬赏分:10 - 解决时间 2021-11-27 14:49
反对 0举报 0 收藏 0

回答2

最佳
  • @

    应该是不能的,vue server proxy 是基于 http-proxy-middleware 中间件的。

    只能用路径(path)用于 context 匹配,关于 path 与 context 的定义如下:

             foo://example.com:8042/over/there?name=ferret#nose
             \_/   \______________/\_________/ \_________/ \__/
              |           |            |            |        |
           scheme     authority       path        query   fragment
    var proxy \= require('http-proxy-middleware');
    
    var apiProxy \= proxy('/api', { target: 'http://www.example.org' });
                          \_____/   \_________________________________/
                             |                    |
                          context             options

    另辟蹊径

    const baseApi = '/api'
    proxy: {
            // 开发环境代理
            // 如:/api/getList 会被此处代理
            [`${baseApi}/(?!mock)`]: {
                target: process.env.VUE_APP_DOMAIN || 'http://test.com', // 测试环境
                changeOrigin: true,
            },
            // mock 数据代理
            // 如:/api/mock/getList 会被此处代理
            [`${baseApi}/mock`]: {
                target: 'http://demo.com',
                changeOrigin: true,
                pathRewrite: {
                    [`${baseApi}/mock`]: `/mock/to/path`,
                },
            },
        }

    From gauseen

    支持 0 反对 0 举报
    2021-11-27 05:58
  • @
    能设置带https的域名吗。

    不能。
    代理是你访问本地开发服务器,服务器帮你转发请求到真实地址,因为跨域是针对浏览器的,从开发服转发的请求,经过中转后对于浏览器来说就是同源了。

    支持 0 反对 0 举报
    2021-11-27 07:25