ajax如何访问json文件，ajax请求json数据

时间：2026-06-29 12:06:47|栏目：AJAX相关|点击：次

在Web开发实践中，通过Ajax技术直接访问本地JSON文件常因浏览器同源策略限制而遭遇跨域错误（CORS），核心解决方案并非在Ajax代码中强行绕过限制，而是必须从服务端配置入手，通过Nginx、Apache或Node.js等中间件正确设置响应头，或在开发阶段使用代理服务器解决跨域问题，从而确保前端请求能够合法、稳定地获取数据。

跨域错误的根源与本质

许多开发者在本地调试时，直接使用file://协议打开HTML文件并通过$.ajax请求data.json，往往会看到控制台报错“Access to XMLHttpRequest at... from origin 'null' has been blocked by CORS policy”，这并非Ajax代码编写错误，而是现代浏览器出于安全考虑实施的同源策略（Same-Origin Policy）。

同源策略要求协议、域名、端口三者完全一致，当通过Ajax发起请求时，如果目标资源与当前页面不同源，浏览器会拦截响应，对于本地文件，由于没有明确的域名和端口，浏览器将其视为“null”源，从而拒绝任何外部资源的读取，解决思路必须从“如何让浏览器放行”转向“如何提供合法的HTTP服务”。

专业解决方案：服务端配置优先

在生产环境和标准开发流程中，最稳健的做法是搭建本地服务器,并配置CORS响应头。

Nginx配置方案 Nginx作为高性能反向代理服务器，是处理此类问题的首选，在nginx.conf或对应的server块中,添加以下配置：

location /data/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    # 处理预检请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

此配置允许所有来源发起GET和POST请求，并明确允许常见的请求头，重启Nginx后，通过http://localhost访问页面即可正常请求JSON文件。

Apache配置方案 若使用Apache服务器，需在.htaccess文件或配置文件中启用mod_headers模块：


    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"

开发环境便捷方案：代理服务器

对于前端开发者而言，频繁配置服务器可能略显繁琐，在Vue CLI、Webpack或Create React App等现代构建工具中,利用开发服务器的代理功能是更高效的实践。

以Webpack为例，在webpack.dev.conf.js或vue.config.js中配置devServer.proxy：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080', // 假设JSON文件托管在此
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

前端请求/api/data.json时，开发服务器会将其转发至目标地址，并处理CORS头，这种方式对业务代码无侵入,且完全符合生产环境的请求逻辑。