React中如何获取AXIOS请求返回JSON响应里的URL并在新标签页打开

修正后的可运行代码 #

import https from 'https';
import Axios from 'axios';

// 如果你需要在其他逻辑中使用authorizationLinks可以保留对应的state，否则可以删除相关state逻辑
function sendAddRequest(id) {
  const headers = { 
    X_TPP: id
  };
  const agent = new https.Agent({ 
    rejectUnauthorized: false 
  });

  Axios.get(
    "/Auth/v1/auth", 
    {
      headers,
      httpsAgent: agent
    }
  )
  .then((response) => {
    // 直接从响应体中提取目标url字段
    const targetUrl = response.data.url;
    // 第二个参数_blank保证在新标签打开，降低被浏览器拦截的概率
    window.open(targetUrl, '_blank');
    // 如果需要把url存到state供其他地方使用，再加这行即可：
    // setauthorizationLinks(targetUrl);
  })
  .catch((err) => console.error('请求失败：', err));
}

原有代码的问题说明 #

• Axios的get方法第二个参数是统一的配置项对象，你之前将httpsAgent拆分到第三个参数传递，对应配置不会生效
• 异步请求的回调逻辑执行顺序晚于同步代码，你把window.open写在then外部时，请求还未返回，永远拿不到响应数据
• 你之前将整个响应对象序列化为字符串存储，无法直接提取内部的url字段，不需要序列化，直接取响应结构下的data.url即可
• Access-Control-Allow-Origin是服务端返回的响应头，请求侧携带该字段无实际作用，可以直接删除

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