有啥方法可以避免 axios 中的 linkpreview.net 出现 CORS 错误，例如 Angular 中的 trustAsResourceUrl()？

Posted 2023-02-22

【中文标题】有啥方法可以避免 axios 中的 linkpreview.net 出现 CORS 错误，例如 Angular 中的 trustAsResourceUrl()？

【英文标题】：Is there any way to avoid CORS error with linkpreview.net in axios like trustAsResourceUrl() in Angular?有什么方法可以避免 axios 中的 linkpreview.net 出现 CORS 错误，例如 Angular 中的 trustAsResourceUrl()？

【发布时间】：2017-12-11 07:12:10

【问题描述】：

我正在尝试使用 axios 在我的 reactJS 应用程序中实现 linkpreview.net API，但它给了我跟随 CORS 错误

跨域请求被阻止：同源策略不允许读取 远程资源在 http://api.linkpreview.net/?callback=JSON_CALLBACK&q=abc.xyz&key='我的 关键在这里'。 （原因：CORS 标头“Access-Control-Allow-Origin” 不见了）。

这是我的 axios 代码

axios(
          method:'post',
          url:"http://api.linkpreview.net/?callback=JSON_CALLBACK&q="+res+"&key="+UserSetting.fetchUrlKey,
          headers: 'Access-Control-Allow-Origin': '*',
          data: data
      )
      .then(response => 
        console.log(response);

      )
      .catch((error) => 
        console.log(error);
      )

如果我做错了什么请告诉我！

【问题讨论】：

我认为 CORS 标头应该设置在应用程序的后端而不是 javascript 中

我正在使用 linkpreview.net 的 API。请检查linkpreview.net

你试过设置dataType: 'jsonp'吗？还有为什么你没有在数据中传递q 和key 而不是url？

我在这两个地方都尝试了这两个数据。另外如何在axios中设置dataType？在标题中？？

在method之后添加新的dataType属性

【参考方案1】：

由于某种原因，Axios 不会为 jsonp 请求提供支持，这里提到了这一点：https://github.com/mzabriskie/axios/pull/15

为此，他还使用 npm 包 jsonp 为 jsonp 提供了另一个配方

所以，您可以尝试一下并使用类似的东西：

var j = require('jsonp');

j('http://api.linkpreview.net/?key=123456&q=https://www.google.com', function (err, data) 
  if (err) 
    console.error(err.message);
   else 
    console.log(data);
  
);

【参考方案2】：

您不必再使用 JSONP，因为 api.linkpreview.net 现在完全支持 CORS - 简单和预检。我对 axios 不熟悉，但这应该适用于 jQuery：

$.ajax(
    url: "https://api.linkpreview.net?key=123456&q=https://www.google.com",
        success: function(result)
            console.log(result);
    
);