使用AgGrid社区版无法跨域获取JSON数据问题求助

这个问题和AgGrid无关——AgGrid只是接收HttpClient返回的数据，请求挂起是HTTP请求本身的问题，和数据最终是否用于AgGrid没有关联。以下是具体排查和解决步骤：

• 先验证本地服务器与文件可用性
  直接在浏览器地址栏访问 https://localhost/row-data.json，确认能正常加载JSON内容：

  • 如果无法加载，说明本地服务器未启动、文件路径错误，或者服务器配置存在问题，先解决服务器端的基础运行问题。
  • 如果能正常加载，再继续排查跨域或请求配置问题。

• 解决跨域（CORS）限制
  若前端项目运行的域名/端口和localhost服务器不一致（比如Angular默认跑在http://localhost:4200，而你的JSON服务器在https://localhost），浏览器会触发同源策略限制，导致请求被拦截。解决方式：

  1. 在本地服务器的响应头中添加CORS配置，比如设置：

     Access-Control-Allow-Origin: http://localhost:4200
     

     开发环境可临时用*允许所有来源，但生产环境必须指定具体域名。
  2. 或使用Angular代理转发（推荐开发环境使用）：
     • 在项目根目录创建proxy.conf.json文件：

       {
         "/row-data.json": {
           "target": "https://localhost",
           "secure": false,
           "changeOrigin": true
         }
       }
       

     • 修改angular.json中serve的配置，添加proxyConfig：

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

     • 将请求路径改为相对路径：

       this.http.get('/row-data.json').subscribe(data => {
         console.log(data.toString());
       })
       

     • 重启Angular开发服务器。

• 检查HTTPS证书问题
  如果使用https://localhost，需确保服务器的SSL证书被浏览器信任。开发环境可先换成http://localhost测试，若请求正常，再处理HTTPS证书的信任配置。

• 用浏览器开发者工具深挖问题
  打开浏览器F12的「Network」面板，找到挂起的请求：

  • 查看请求头是否正确发送，有没有被浏览器自动添加异常参数。
  • 切换到「Console」面板，查看是否有隐藏的CORS或安全报错（部分拦截不会直接显示请求失败，只会静默挂起）。

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