开发阶段如何测试Dropzone？Angular5项目CORS问题下的测试方案咨询

嘿，完全不用每次都编译完整打包来测试改动！针对你遇到的CORS问题和测试效率问题，这里有几个实用的方案：

1. 用Angular CLI的代理配置绕过CORS #

这是前端开发中解决本地CORS问题最常用的办法，不用改后端也不用打包：

• 在项目根目录新建一个proxy.conf.json文件，内容示例：

  {
    "/api": {
      "target": "http://你的后端实际地址",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
    }
  }
  

  这里的/api是你前端请求后端的接口前缀，替换成你实际的接口路径前缀即可。
• 修改angular.json里的serve配置，添加代理配置：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名:build",
      "proxyConfig": "proxy.conf.json"
    }
  }
  

• 之后直接用ng serve启动项目，前端所有发往/api的请求都会被自动转发到你配置的后端地址，浏览器层面不会触发CORS检查，而且代码改动后会自动热重载，完全不用打包。

2. 临时用浏览器CORS插件跳过检查 #

如果只是临时快速测试，不想折腾配置，可以用浏览器的CORS插件，比如Chrome的「Allow CORS: Access-Control-Allow-Origin」：

• 安装插件后开启它，就能临时绕过浏览器的CORS限制，直接用ng serve启动前端测试Dropzone的上传逻辑。
• 注意：这个方法只适合本地测试，绝对不能用于生产环境，测试完记得关掉插件，避免安全风险。

3. 用Mock接口独立测试前端逻辑 #

如果后端暂时没法配合，你可以先Mock一个上传接口，完全脱离真实后端测试Dropzone的前端逻辑：

• 比如用Angular的In-Memory Web API，或者自己写一个简单的服务拦截Dropzone的上传请求，模拟返回成功/失败的响应。
• 举个简单的例子，你可以在组件里监听Dropzone的事件，手动模拟后端响应：

  import { DropzoneComponent } from 'ngx-dropzone-wrapper';
  
  // 组件内的方法
  onDropzoneSending(event: any) {
    // 拦截真实请求，模拟后端响应
    event.preventDefault();
    // 模拟上传成功的延迟返回
    setTimeout(() => {
      this.dropzoneComponent.directiveInstance.emitSuccess(event.file, { status: 200 }, '上传成功');
    }, 1000);
  }
  

  这样你就能在本地完全测试Dropzone的UI交互、上传状态提示等逻辑，不用依赖后端。

总结一下，优先用Angular代理配置，既能解决CORS问题又能享受热重载；如果只是临时测试用插件；如果要独立测前端逻辑就用Mock。这些方法都不用每次编译打包，能大大提升你的开发效率！

内容的提问来源于stack exchange，提问作者tatsu