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

Posted 2023-02-22

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

【英文标题】：How to enable CORS between http://localhost:3000/ and TMDB api in ReactJS?

【发布时间】：2021-02-21 06:31:32

【问题描述】：

我遇到了无法从 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

【参考方案1】：

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

【讨论】：

对我来说，它仍然会在 'api.themoviedb.org/3' 处从原始 'localhost:3000' 错误中提供对 XMLHttpRequest 的访问权限。出于测试目的，我将 fetchUrl 更改为“api.themoviedb.org/3/trending/all/day?api_key=xxx”，并提供数据。我怀疑 fetchUrl 不正确。

@rafalias 你试过扩展吗？

是的，我确实在 localHost:3000 上打开了 Allow Cors