我使用 Rails 后端作为带有 React 前端的 API 并对 RAWG API 进行 API 调用，但出现错误 access to XMLHttpRequest at 'https://api.rawg.io/api/platforms?key=914b1fb52d0e46e1a557fbf0a3e5d092' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by access-Control-Allow-Headers in preflight response.
但网络标签上的错误显示 
带有 CORS 错误和预检以及 CORS 错误的请求标头为 
但是预检的响应头和请求头是
我的 games.jsx 文件是
import React,{ useEffect } from 'react'
import axios from 'axios'
const Games = () => {
const getGames = async (event) => {
try {
const response = await axios.get("https://api.rawg.io/api/platforms?key=APIKEY",{
headers: {
'access-control-allow-origin': '*','Content-Type': 'application/json',},}
)
console.log(response);
} catch (error) {
console.log(error)
}
}
return (
<div>
<button onClick={getGames}>get games</button>
</div>
)
}
export default Games并且还在 rails 中添加了 rack-cors gem
cors.rb
Rails.application.config.middleware.insert_before 0,Rack::Cors do
allow do
origins '*'
resource '*',headers: :any,methods: [:get,:post,:patch,:put]
end
结束
axios.js
import axios from "axios";
import Toastr from "../Common/Toastr";
// import { setToLocalStorage } from "helpers/storage.js";
axios.defaults.baseURL = "/";
export const setauthHeaders = (setLoading = () => null) => {
axios.defaults.headers = {
accept: "applicaion/json","Content-Type": "application/json",'access-control-allow-origin': '*',"X-CSRF-TOKEN": document
.querySelector('[name="csrf-token"]')
.getattribute("content"),};
// const token = localStorage.getItem("authToken");
const email = localStorage.getItem("authEmail");
if (email) {
axios.defaults.headers["X-Auth-Email"] = email;
// axios.defaults.headers["X-Auth-Token"] = token;
}
setLoading(false);
};尝试了我在 Stackoverflow 上能找到的几乎所有东西，但没有任何帮助