被 CORS 政策阻止：响应 js 应用程序问题。 阿克西奥斯

Question

CORS 政策已阻止从源“http://localhost:3000”访问“https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower”上的 XMLHttpRequest：响应`预检请求未通过访问控制检查：它没有 HTTP ok 状态。

仅在任何地方添加 CORS PREURL 它可以工作 10 次，因为它是临时的。 我该如何解决 ？

屏幕截图：[1]： https : //i.stack.imgur.com/IvSmE.png

import { useState, useEffect } from "react";
import axios from 'axios';
function App() {

  const [word, setWord] = useState("");
  const [meanings, setMeanings] = useState([]);
  const [category, setCategory] = useState("en");

  const dictionaryApi = async () => {
    try {
      const app_id = "6a94204f";
      const app_key = "953e41694cf8d1bf1549b3fcec957f5c";
      const data = await axios.get(
        // `https://cors-anywhere.herokuapp.com/https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower`
        `https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower`


        , {
          headers: {
            'Authorization': '6a94204f',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
            'Access-Control-Allow-Headers': "append,delete,entries,foreach,get,has,keys,set,values,Authorization",
          }
        });

      setMeanings(data.data);
    } catch (error) {
      console.log(error);
    }
  };
  console.log(meanings);

  useEffect(() => {
    dictionaryApi();
  }, [word, category]);



  return <>HELLO</>;
}

导出默认应用程序；

Answer 1

CORS 相关的问题一般应该从服务器端解决。

请尝试使用 Postman 或类似应用程序触发 GET 请求 URL https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower 。

当我尝试时，它显示“缺少身份验证参数”。

也许您没有在 axios 请求中正确使用 app_id 和 app_key。