Symfony4+Api Platform下jsonld.js处理相对URL@context问题

这个问题我之前也碰到过，核心原因是jsonld.js默认会把相对URL解析为当前前端页面的URL，而不是API端点的URL，导致上下文文件或资源链接请求错误。下面给你几个可行的解决方案：

方案1：让Api Platform返回绝对URL（推荐） #

最简单的方式是在Api Platform的配置里全局开启绝对URL生成，这样返回的@context、@id以及所有资源链接都会变成完整的绝对路径，jsonld.js就能直接正确解析，不需要前端做额外处理。

在Symfony的config/packages/api_platform.yaml中添加或修改配置：

api_platform:
    # 保留你已有的其他配置
    context_builder:
        absolute_url: true

修改后清空缓存（php bin/console cache:clear），重新请求/api/v1，返回的内容就会变成类似：

{ 
  "@context": "http://your-api-domain.com/api/v1/contexts/Entrypoint", 
  "@id":"http://your-api-domain.com/api/v1", 
  "@type":"Entrypoint", 
  "story":"http://your-api-domain.com/api/v1/stories", 
  "author":"http://your-api-domain.com/api/v1/authors" 
}

这样jsonld.js就能直接识别并加载上下文文件了。

方案2：前端处理时指定JSON-LD的Base URL #

如果暂时无法修改API配置，可以在调用jsonld.js方法时，手动传入API的基础URL作为base参数，告诉jsonld.js如何解析相对路径。

示例代码：

fetch('/api/v1')
  .then(r => r.json())
  .then(json => {
    // 替换成你的API实际域名，同域的话可以用 window.location.origin + '/api/v1'
    const apiBaseUrl = 'http://your-api-domain.com/api/v1';
    // 调用jsonld的方法时传入base参数
    return jsonld.expand(json, { base: apiBaseUrl });
  })
  .then(expandedData => {
    // 处理解析后的结果
    console.log('解析完成:', expandedData);
  })
  .catch(err => console.error('JSON-LD处理失败:', err));

方案3：手动替换相对URL为绝对URL #

另一种前端方案是遍历返回的JSON数据，把所有相对路径替换成绝对URL，再交给jsonld.js处理：

// 递归替换JSON中的相对URL
function convertToAbsoluteUrls(json, apiDomain) {
  if (typeof json !== 'object' || json === null) return json;

  Object.keys(json).forEach(key => {
    const value = json[key];
    if (typeof value === 'string' && value.startsWith('/api/v1')) {
      json[key] = `${apiDomain}${value}`;
    } else if (typeof value === 'object') {
      convertToAbsoluteUrls(value, apiDomain);
    }
  });
  return json;
}

fetch('/api/v1')
  .then(r => r.json())
  .then(json => convertToAbsoluteUrls(json, 'http://your-api-domain.com'))
  .then(json => jsonld.process(json))
  .catch(err => console.error(err));

补充说明 #

为什么会出现这个问题？
JSON-LD规范中，相对URL的解析是基于文档的基URL，也就是该JSON-LD文档被获取时的URL。但在前端fetch场景下，jsonld.js有时无法自动识别这个基URL（比如跨域请求时），导致它错误地使用前端页面的URL作为基地址来解析相对路径，最终请求了错误的资源地址。

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