vue2.0动态代理详讲

2.配置示例

   devServer: { 
           proxy: {
             // 只要请求的路径中有 /pdf 就会走这个代理 
             '/pdf': {
               // 请求的路径会变成以下路径
               target: 'http://61.186.254.137:20001',
               // 是否开启跨域(如果接口跨域，需要进行这个参数配置)
               changeOrigin: true,
               pathRewrite: {
                 // 正则匹配到以 /pdf 的资源路径,会把 /pdf 直接替换成指定路径(在这里是直接把 /pdf 去除了)
                 '^/pdf': ''
               }
             }
           }

2.说明

• 这个时候, 项目中如果有地址出现跨域,根据上面的规则,路径写成以下方式:
  pdf/sources/getPdfText
• 经过代理的配置后,实际请求的路径会变成:
  http://61.186.254.137:20001/sources/getPdfText

3.多个跨域配置

 devServer: { 
        proxy: { 
          '/pdf': { 
            target: 'http://61.186.254.137:20001', 
            changeOrigin: true,
            pathRewrite: { 
              '^/pdf': ''
            }
          },
          'api': {
			 target: 'http://61.186.224.168:50008', 
             changeOrigin: true,
             pathRewrite: { 
               '^/api': '/api'
             },
           'sour': {
			 target: 'http://61.156.159.126:40023', 
             changeOrigin: true,
             pathRewrite: { 
               '^/sour': 'sour'
             }
		  }
        }

4.注意

• 配置完成以后, 一定要重新运行, 重启服务
• 如果重启服务不生效, 可以尝试关闭代码编辑器(vscode), 重新进入编辑器后再运行代码