在reactjs中使用YTDL核时获取CORS

Question

我有一个简单的组件，它列出了所有可用的格式以及它们的mime类型。我在我的反应应用程序中使用了ytdl和ytdl核心。这是我尝试过的。

import React from 'react';
import ytdl from 'ytdl-core';
const YoutubeDownload=()=> {
    const handleSubmit=(e)=>{
        e.preventDefault();
        console.log("Submitted");
        fetchFormats();
    }

     const fetchFormats=()=>{
        let link="https://www.youtube.com/watch?v=-mD6StqjD9c";
        let info=ytdl.getInfo("-mD6StqjD9c");
        console.log(info.formats);
    }
    return (  <>
    <article>
        <form className="form" onSubmit={handleSubmit}>
            <div className='form-control'>
                <label>Video Link</label>
           <input type="text" id="videoLink"></input>
           </div>
           <div className='form-control'>
        <button className='btn' >Submit </button>
        </div>
        </form>
        </article>
    </>);
}

当我单击submit按钮时，CORS会出现错误，并且它无法获取数据。Internet显示您需要在服务器上添加访问控制原点，这在我的情况下是不可能的。有什么方法可以让我做出反应，因为我已经看到了一些方法，建议我制作一个node.js服务器并在那里使用cors包。

Answer 1

在这种情况下。我建议你用任何地方

打开上面的网页链接，点击请求访问按钮。然后像这样追加YouTube URL。

https://cors-anywhere.herokuapp.com/https://youtube.comyour-video

这只适用于开发环境。你在生产上不需要这个。