如何在 ReactJS 中的 http://localhost:3000/ 和 TMDB api 之间启用 CORS？

Question

我遇到了无法从 TMDB API 获取数据的错误。

从源“http://localhost:3000”访问“https://api.themoviedb.org/3”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

axios.js 设置

import axios from "axios";  
const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
})  
export default instance;

request.js 设置：

const API_KEY = "xxx";  
const request = {  
  fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,  
  fetchNetflixOriginal: `/discover/tv?api_key=${API_KEY}&with_networks=213`,  
}  
export default request;

App.js

useEffect(() => {
        //if [], run once when row load, and dont run again
        console.log("rrrrsd >>> ", typeof(fetchUrl))

        async function fetchData(){
            const response = await axios.get(fetchUrl, {
                headers:{
                    'Access-Control-Allow-Origin': '*',
                }
            }).then(function (response){
                console.log('response >>>>', response.data)
            }).catch(function (error){
                if(error.response){
                    console.log('response error >>>', error.response.headers)
                }
                else if(error.request){
                    console.log('error request >>>', error.request)
                }
                else{
                    console.log('message error >>>', error.message)
                }
            })

        }
        fetchData()
    },[fetchUrl])

请帮我在 TMDB API 和 ReactJS localHost 之间启用 CORS

Answer 1

使用 google chrome 扩展程序，例如 (CORS Domain) 或 (Allow CORS) 我昨天遇到了同样的问题，扩展程序解决了它