如何配置VSCode自动带--disable-web-security调试Flutter Web

要让VSCode的「运行和调试」按钮自动启用Chrome的跨域禁用参数，只需修改或创建.vscode/launch.json配置文件，具体步骤如下：

1. 打开launch.json配置文件

   • 点击VSCode左侧「运行和调试」面板（快捷键Ctrl+Shift+D）
   • 点击面板顶部的齿轮图标，选择「Dart & Flutter」作为环境（未配置过的话），系统会自动生成基础配置文件；已有配置则直接打开该文件。

2. 添加/修改Flutter Web调试配置
   在configurations数组中添加或修改一条配置，重点在args字段中加入浏览器参数：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Flutter Web (无CORS限制)",
         "request": "launch",
         "type": "dart",
         "args": [
           "-d",
           "chrome",
           "--web-browser-flag",
           "--disable-web-security",
           "--web-browser-flag",
           "--user-data-dir=C:/temp/chrome_dev" // 必须指定临时用户目录，Chrome当前要求禁用安全模式时提供该参数
         ]
       }
     ]
   }
   

   • Mac/Linux用户可将--user-data-dir的值改为/tmp/chrome_dev这类临时路径
   • 可保留原有默认配置，新增这条专门用于无CORS限制的调试，方便按需切换

3. 启动调试
   在「运行和调试」面板的配置下拉菜单中选择刚才创建的「Flutter Web (无CORS限制)」，点击启动按钮，Chrome就会自动带着禁用跨域安全的参数启动，API请求不会再因CORS失败。

注意事项：

• 该配置仅用于本地开发调试，绝对不要用于生产环境
• 每次启动会打开全新的临时用户窗口，不会影响你常用的Chrome配置

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