FiveM服务器网站用JQuery Ajax获取本地JSON遇CORS拦截求助

问题原因 #

浏览器同源策略拦截了请求：你的官网运行在默认HTTP端口（80），而FiveM服务器在30120端口，属于不同源，服务器未返回Access-Control-Allow-Origin响应头，导致请求被拦截。

解决方案 #

1. 在FiveM服务器添加CORS响应头 #

创建一个简单的FiveM Lua资源来处理dynamic.json的请求并添加CORS头：

• 在FiveM服务器的resources文件夹下新建cors-fix目录
• 目录内创建server.lua文件，写入以下代码：

CreateThread(function()
    local httpServer = CreateHttpServer(30120)
    httpServer:on('GET', '/dynamic.json', function(req, res)
        -- 读取本地dynamic.json文件
        local filePath = 'dynamic.json'
        local file = io.open(filePath, 'r')
        if not file then
            res:send(404, 'File not found')
            return
        end
        local jsonContent = file:read('*a')
        file:close()

        -- 添加CORS允许头，指定官网域名更安全，*表示允许所有（不推荐生产用）
        res:setHeader('Access-Control-Allow-Origin', 'http://45.91.251.46')
        res:setHeader('Content-Type', 'application/json')
        res:send(jsonContent)
    end)
end)

• 在server.cfg中添加启动命令：start cors-fix
• 重启FiveM服务器，前端请求即可正常访问

2. 官网用反向代理（推荐生产环境） #

如果你的官网用Nginx部署，配置反向代理让请求同源：

• 修改Nginx配置文件，添加以下规则：

server {
    listen 80;
    server_name 45.91.251.46;

    location /server-dynamic {
        proxy_pass http://localhost:30120/dynamic.json;
        proxy_set_header Host $host;
    }
}

• 重启Nginx，修改前端AJAX请求的URL为/server-dynamic：

$(function() {
  $(document).ready(function () {
    $.ajax({
      type : "GET",
      url: "/server-dynamic",
      dataType: "json",
      success: function (data) {
        console.log(data[0].clients + " " + data[0].sv_maxclients);
      }
    });
  });
});

3. 开发测试临时方案（仅本地调试用） #

Chrome浏览器可以通过启动参数禁用CORS检查，命令行运行：

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

注意：此方法仅用于开发测试，绝对不能用于生产环境。

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