如何将文本输入参数作为URL参数传入coa.edu.mirantis.com/tool页面？

问题原因 #

你遇到的tool页面无法通过URL参数自动填充表单的核心原因是：该React组件没有实现从URL查询参数初始化组件state的逻辑。页面加载时只会初始化空的state，不会读取地址栏中的cert和name参数填充输入框。

而直接访问/verify/接口返回JSON，是因为这个接口仅提供数据接口，没有配套的前端展示页面——只有通过tool页面提交请求后，才会在页面内解析JSON并展示可视化结果。

可行解决方案 #

1. 自建验证结果展示页面（推荐） #

在你的网站上创建专属页面，负责请求验证接口并展示格式化后的结果：

• 步骤1：在你的网站中新增一个页面（比如certificate-verification.html）

• 步骤2：将图片链接指向该页面，并携带验证参数：

  https://your-website.com/certificate-verification.html?cert=COA-2300-110711-0100&name=Alexey+Kashavkin
  

• 步骤3：在该页面中编写JavaScript代码，实现以下逻辑：

  1. 读取URL中的cert和name参数
  2. 向验证接口发送请求并展示结果：

     const params = new URLSearchParams(window.location.search);
     const cert = params.get('cert');
     const name = params.get('name');
     fetch(`https://coa.edu.mirantis.com/verify/?cert=${encodeURIComponent(cert)}&name=${encodeURIComponent(name)}`)
       .then(res => res.json())
       .then(data => {
         const resultDiv = document.getElementById('result');
         resultDiv.innerHTML = `
           <h3>验证结果</h3>
           <p><strong>证书ID:</strong> ${data.cert || '未提供'}</p>
           <p><strong>姓名:</strong> ${data.name || '未提供'}</p>
           <p><strong>验证状态:</strong> ${data.valid ? '有效' : '无效'}</p>
           <!-- 根据实际返回的JSON字段补充更多内容 -->
         `;
       })
       .catch(err => {
         document.getElementById('result').innerHTML = '<p>验证请求失败，请稍后重试</p>';
       });
     

  3. 在页面中添加结果展示容器：<div id="result"></div>

• 注意事项：如果遇到跨域请求被阻止的问题，需要在你的服务器上搭建反向代理，让前端请求自己的服务器，再由服务器转发请求到验证接口，规避浏览器的跨域限制。

2. 联系Mirantis官方 #

直接询问Mirantis是否提供以下支持：

• 开启tool页面从URL参数自动填充表单的功能
• 提供直接展示验证结果的可视化页面URL格式

这是最稳妥的方案，若官方支持，无需自行开发即可实现需求。

3. 放弃自动提交方案（不可行） #

你之前用Selenium实现的自动填充提交逻辑，受浏览器跨域安全限制，无法直接部署到线上网站（JavaScript不能跨域操作其他网站的DOM），仅能本地使用。

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