为什么使用 axios 获取 url 会导致 CORS 错误？

Question

在我使用 axios 的 React 应用程序中，我正在获取一个 url。我收到一条错误消息，告诉我我的提取已被 CORS 策略阻止，并且请求的资源上不存在“Access-Control-Allow-Origin”标头。但是当我在控制台中单击我的网址时，我可以访问该网址。为什么我无法使用 axios 从我的 React 应用程序访问 URL，而我可以从我的导航器访问该 URL？我怀疑我缺少能够访问此网址的代理。这就是答案吗？

下面是我的 fetch 的源代码。

const url = `https://www.waze.com/row-partnerhub-api/waze-map/streetsInfo?lat=${lat}&lon=${lon}&token=${process.env.REACT_APP_WAZE_GEOCODER}`;
    const config = {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'cross-origin-opener-policy' : 'same-origin-allow-popups',
        'content-type':'application/json',
      }
    };
    try {
      const response = await axios.get(url,config);

Answer 1

Access-Control-Allow-Origin

是响应标头，在请求上设置它不会执行任何操作。

但是是的 - 该资源不允许跨域访问，因此您无法使用其他来源的浏览器访问它。代理可以解决这个问题，但这意味着您必须设置并维护该代理。 （对于开发，工具例如 Vite 可以为您做到这一点，但不适用于生产用途。）

但是当我在控制台中单击我的网址时，我可以访问该网址。

大概它会在新选项卡中打开等等？然后你就向它发出常规请求，而不是来自其他来源。