Как искать фильмы по имени актера (TMDB)?

Question

[Роберт Оганян]

Я создаю веб-сайт, посвященный максимально удобному поиску фильмов. В настоящее время я пытаюсь выполнить поиск, используя только имя актера. В конце концов, я создал код, который должен был найти фильмы с участием введенного актера, но этого не произошло. Более того, когда я набираю имя любого актера, я просто вижу вариант фильма «Неопределенный» (иногда есть два фильма).

HTML

<div class="actor-form" id="actorForm">
        <input type="text" class="actor-form-input" placeholder="Desired Actor:" name="name" id='actorNameInput'
            autocomplete="off">
        <label for="actorNameInput" class="actor-form-label">
            <span class="actor-form-span">Desired Actor</span>
        </label>
    </div>

    <main id="main"></main>

CSS

.actor-form {
    position: absolute;
    padding: 10px 0 0 0;
    width: 40%;
    left: 50%;
    top: 35%;
    transform: translate(500%, -50%);
    transition: all 2s;
    cursor: default;
}

.actor-form-input {
    font-family: 'Marvel', sans-serif;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #202020;
    outline: 0;
    font-size: 26px;
    color: #202020;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.4s;
}

.actor-form-input::placeholder {
    color: transparent;
}

.actor-form-input:placeholder-shown+.actor-form-label {
    font-size: 26px;
    cursor: text;
    top: 20px;
}

.actor-form-label {
    position: absolute;
    top: -20px;
    display: block;
    transition: 0.2s;
    color: #202020;
    font-size: 24px;
    font-family: 'Marvel', sans-serif;
}

.actor-form-input:focus+.actor-form-label {
    position: absolute;
    top: -20px;
    display: block;
    transition: 0.2s;
    color: #21ebff;
    font-size: 24px;
}

.actor-form-input:focus {
    border-bottom: 2px solid #21ebff;
}

.actor-form-span {
    -webkit-user-select: none;
    user-select: none;
}

JS

// Show Movies

const API_KEY = 'api_key= [тут мой apikey]';
const BASE_URL = 'https://api.themoviedb.org/3';
const API_URL = BASE_URL + '/discover/movie?sort_by=popularity.desc&' + API_KEY;
const IMG_URL = 'https://image.tmdb.org/t/p/w500';
const searchURL = BASE_URL + '/search/movie?' + API_KEY;
const searchPersonURL = BASE_URL + '/search/person?' + API_KEY;

getMovies(API_URL);

function getMovies(url) {

    lastUrl = url;
    fetch(url).then(res => res.json()).then(data => {
        if (data.results.length !== 0) {
            showMovies(data.results);
            currentPage = data.page;
            nextPage = currentPage + 1;
            prevPage = currentPage - 1;
            totalPages = data.total_pages;

            current.innerText = currentPage;

            if (currentPage <= 1) {
                prev.classList.add('disabled');
                next.classList.remove('disabled')
            } else if (currentPage >= totalPages) {
                prev.classList.remove('disabled');
                next.classList.add('disabled')
            } else {
                prev.classList.remove('disabled');
                next.classList.remove('disabled')
            }

            tagsEl.scrollIntoView({ behavior: 'smooth' })

        } else {
            main.innerHTML = `<h1 class="no-results">No Results Found</h1>`
        }

    })

}

function showMovies(data) {
    main.innerHTML = '';

    data.forEach(movie => {
        const { title, poster_path, vote_average, overview, id } = movie;
        const movieEl = document.createElement('div');
        movieEl.classList.add('movie');
        movieEl.innerHTML = `
             <img src="${poster_path ? IMG_URL + poster_path : "http://via.placeholder.com/1080x1580"}" alt="${title}">
            <div class="movie-info">
                <h3>${title}</h3>
            </div>
            <div class="overview">
                <h3>Overview</h3>
                ${overview}
                <br/> 
                <button class="know-more" id="${id}">Know More</button
            </div>
        
        `

        main.appendChild(movieEl);

        document.getElementById(id).addEventListener('click', () => {
            console.log(id)
            openNav(movie)
        })
    })
}

// Actor Form

const actorFormLabel = document.querySelector('.actor-form-label');
const actorNameInput = document.getElementById('actorNameInput');

actorNameInput.addEventListener('input', function (e) {
    let val = e.target.value.trim();
    if (val.length) {
        getMovies(searchPersonURL + '&query=' + encodeURI(val));
        console.log(encodeURI(val));
    }
});

Answer 1

[Антон Шаманов]

о, снова ты) там же написано:

Раздача Amazon CloudFront настроена на блокировку доступа из вашей страны.

т.е. тебе нужно передавать запрос через прокси