如何在Chrome开发者工具中发起HTTP请求并解决CORS问题？

方案1：直接用Network面板发起请求（推荐，无安全风险） #

这是最稳妥的方式，完全不受当前页面的CORS限制：

• 打开Chrome开发者工具（快捷键F12或Ctrl+Shift+I）
• 切换到「Network」面板
• 点击左上角的「+」按钮（或右键空白处选择「New Request」），打开请求编辑器
• 在请求地址栏输入目标API（比如https://api.example.com/data），选择对应的请求方法（GET/POST等）
• 按需添加请求头、查询参数或请求体，最后点击「Send」发送请求
• 请求完成后，可在下方查看响应内容，还能直接复制响应数据用于本地页面测试

方案2：启动Chrome时禁用CORS限制（仅用于本地开发测试） #

注意：此方法会关闭浏览器的跨源安全保护，仅适合开发测试，禁止用于日常网页浏览：

1. 关闭所有Chrome窗口
2. 根据系统运行对应命令：
   • Windows：

     chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
     

   • Mac：

     open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
     

   • Linux：

     google-chrome --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
     

3. 在新启动的Chrome窗口中，打开你的项目页面，控制台运行原fetch代码即可绕过CORS限制

方案3：复制Network面板的响应数据到本地使用 #

如果只是需要获取API数据并在本地页面展示，无需实时请求：

• 用方案1发起请求后，在响应面板右键选择「Copy」→「Copy response」
• 在本地项目的JS代码中直接使用这段复制的JSON数据，模拟API返回的效果

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