被CORS策略阻止:反应js应用程序问题.Axios

Question

访问'XMLHttpRequesthttps://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower'来自原点'http://localhost:3000'已被CORS策略阻止：对'飞行前请求的响应未通过访问控制检查：它没有HTTP正常状态

只在任何地方添加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请求URLhttps://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower.

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

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

编辑并更新如下

此处不需要授权标头。它是app_id，应该在头中提供app_key以使其工作。您可以参考此处提供的文档https://developer.oxforddictionaries.com/

上述问题与CORS完全无关。我在Postman上试过，发现它很管用。

虽然没有什么建议

1. 因为您已经在这里共享了您的app_key和app_id，所以请注意删除/停用现有的app_key并生成新的。这将避免滥用你的app_key，因为在这里共享它已经向公众公开了这个密钥
2. 在react中直接使用API密钥和应用程序Id将使客户端/前端可以访问它。如果您有服务器端/后端，那么使用类似JWT的安全身份验证创建一个单独的API端点，并使用它

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 = "<your app id here>";
const app_key = "<your app key here>";
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: {
'app_id': app_id, //<-- add app id here
'app_key': app_key, //<-- add app key here
'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]);

我已经使用Postman尝试过同样的方法，我已经将其导出到axios

var axios = require('axios');
var config = {
method: 'get',
url: 'https://od-api.oxforddictionaries.com/api/v2/entries/en-us/flower',
headers: { 
'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', 
'Origin': 'https://od-api.oxforddictionaries.com', 
'app_id': '<app_id>', 
'app_key': '<app_key>'
}
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});