Reactjs AWS CDN上带有React的CORS问题

我正在尝试从部署的react应用程序（AWS S3 CDN）对grails应用程序上的资源进行rest调用

React应用程序具有ULR

CORS配置与AWS上的配置相同，当然除了example.com

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

通过所有这些设置，我在浏览器中获得了以下信息：

未能加载：对的响应 飞行前请求未通过访问控制检查：该 “Access Control Allow Origin”标题有一个值 “”不等于提供的原点。 因此，不允许使用源“” 进入

我真的很困惑为什么我会看到？我已经构建了react应用程序并将静态文件复制到CDN中，这是使用

npm start

在本地启动react应用程序时的地址

用于进行rest调用的React代码如下所示：

grails:
  cors:
    enabled: true
    allowedOrigins:
    - "https://something.cloudfront.net"

axios.get<any>('https://example.com/someResources',
    {
        withCredentials: true,
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "X-Requested-With": "XMLHttpRequest"
        },
    })
    .then((response) => 
        console.log(response);
    );

axios.get

我做错了什么？因此CORS问题仍然存在？
您可以将AllowedOrigin永久设置为*

但您需要根据react应用程序域设置有效值，您可以将AllowedOrigin永久设置为*

但是您需要根据您的react应用程序域设置一个有效值
请粘贴网络调试器请求/响应头好吗？
请确保在飞行前请求标头中发送的请求标头中可以看到的1-原点应与1-“访问控制允许原点”匹配。此外，您在请求时调用的HTTP方法、标头和谓词2-“访问控制请求标头”“&3-“访问控制请求方法””应符合响应标头参数：2-“访问控制允许标头”“和3-“访问控制允许方法””。否则，飞行前（选项）请求将失败

可能您的浏览器正在缓存页面。这就是为什么如果您从网络调试模式而不是控制台跟踪它，您可以更容易地跟踪问题。
请粘贴网络调试器请求/响应标题，好吗？
请确保在飞行前请求标头中发送的请求标头中可以看到的1-原点应与1-“访问控制允许原点”匹配。此外，您在请求时调用的HTTP方法、标头和谓词2-“访问控制请求标头”“&3-“访问控制请求方法””应符合响应标头参数：2-“访问控制允许标头”“和3-“访问控制允许方法””。否则，飞行前（选项）请求将失败

可能您的浏览器正在缓存页面。这就是为什么如果您从网络调试模式而不是控制台跟踪它，您可以更容易地跟踪问题。
我为此挣扎了几天！反应AWS API和CORs

这时我正在使用fetch和axios

答案是去掉所有的标题。正如everywhere所说，头是服务器端的东西。报告的错误似乎是CORS/飞行前错误，解决方案在于选项过程。我尝试了所有的方法，今天早上我删除了API，用打开CORS的每一个选项重新构建了它，然后去掉了我的代码中的头和变量，而是加载了一个URL，看看我是否可以通过它，看看我会遇到什么样的错误。没有一个代码如下：

axios.post(postUrl).then(
  (res) => {
    console.log('Axios:',res);
    console.log('Axios data:',res.data);
  }
).catch((err) => {
  console.log('Axios Error:', err);
})

fetch(postUrl, {
      method: 'POST'
    }).catch(error => console.log('fetch',error))

fetch也“裸体”工作。我更喜欢axios，因为它可以用数据来安慰结果。如果可能的话，我不知道该怎么做。我知道旧浏览器的fetch存在一些问题

其中，postrl是用于在浏览器中测试API的URL

我现在只需要编写代码来动态构建URL，这应该很容易。著名的遗言…
我为此挣扎了几天！反应AWS API和CORs

这时我正在使用fetch和axios

答案是去掉所有的标题。正如everywhere所说，头是服务器端的东西。报告的错误似乎是CORS/飞行前错误，解决方案在于选项过程。我尝试了所有的方法，今天早上我删除了API，用打开CORS的每一个选项重新构建了它，然后去掉了我的代码中的头和变量，而是加载了一个URL，看看我是否可以通过它，看看我会遇到什么样的错误。没有一个代码如下：

axios.post(postUrl).then(
  (res) => {
    console.log('Axios:',res);
    console.log('Axios data:',res.data);
  }
).catch((err) => {
  console.log('Axios Error:', err);
})

fetch(postUrl, {
      method: 'POST'
    }).catch(error => console.log('fetch',error))

fetch也“裸体”工作。我更喜欢axios，因为它可以用数据来安慰结果。如果可能的话，我不知道该怎么做。我知道旧浏览器的fetch存在一些问题

其中，postrl是用于在浏览器中测试API的URL

我现在只需要编写代码来动态构建URL，这应该很容易。著名的遗言