Question

我刚刚完成我的第一个网站，现在转移到尝试学习反应，因为我想将Js前端框架整合到我的网站中。我已经开始使用Laravel进行此操作，因为我在PHP上投入了相当多的时间，而我所在地区的很多工作都是基于php的。

在我遇到想要访问某些外部API的教程之前，一切都很好。

前一天，我遇到了一个问题，要我访问免费的api，但由于cors政策阻止了我的请求，因此遇到了麻烦。经过数小时的搜寻和修补后，我安装了barryVDH / laravel-cors模块，该模块也无法解决我的问题。最终，我遇到了问题，这是laravel提供的bootstrap.js文件中的以下代码行：

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

要解决此问题，我在另一个js文件中创建了axios的实例，可以调用它来摆脱此标头：

import axios from 'axios';

// Enables a axios without CSRF Token for cross domain requests that cause issues
let extAxios = axios.create();
delete extAxios.defaults.headers.common['X-Requested-With'];

export default extAxios;

这很好用，使我能够毫无问题地访问API，所以我认为我已经破解了如何访问外部API。

快到昨天，我在另一个API上也遇到了同样的问题，但是我的旧解决方案无法正常工作，我绝对不知道该怎么做。

这次有问题的Api是musixmatch API，我一生中无法使用它，也无法在网络上找到任何解决方案。

所以像以前一样，我在应用程序中设置了barryVDH / laravel-cors，如他们的github页面所述：

在我的app.php中，我们有：

        /*
         * Laravel Framework Service Providers...
         */

        ...

        Barryvdh\Cors\ServiceProvider::class,

在我的kernel.php中，我们有：

        protected $middleware = [

        ...

        \Barryvdh\Cors\HandleCors::class,
    ];

我正在使用与上次相同的extAxios实例：

extAxios(
    'https://api.musixmatch.com/ws/1.1/chart.artists.get?page=1&page_size=3&country=it&apikey=MY_API_KEY'
)
.then(res => console.log(res.data))
.catch(err => console.log(err));

发送请求后，我的Chrome控制台出现以下错误：

从原点“ https://api.musixmatch.com/ws/1.1/chart.artists.get?page=1&page_size=3&country=it&apikey=MY_API_KEY”到“ http://current-dev.test”处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-来源的标头出现在请求的资源上。

错误：网络错误在createError（index.js：745）在XMLHttpRequest.handleError（index.js：280）

跨域读取阻止（CORB）阻止了MIME类型为text / plain的跨域响应https://api.musixmatch.com/ws/1.1/chart.artists.get?page=1&page_size=3&country=it&apikey=MY_API_KEY。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

如果我从我的网络浏览器发出请求，那么它可以正常工作，并且我收到json响应。

对此我一无所知，而且我不确定是什么原因导致的，因此，我从现在开始一直希望以laravel为基础来构建完整的堆栈应用程序，对此将有所帮助。

使用Laravel访问外部API

0 个答案: