时间戳

首页 > 解决方案 > 使用 React 的 AWS CDN 上的 CORS 问题

reactjs - 使用 React 的 AWS CDN 上的 CORS 问题

问题描述

我正在尝试从已部署的反应应用程序（AWS S3 CDN）对 grails 应用程序上的资源进行休息调用。

React 应用程序具有 ULR https://something.cloudfront.net/index.html

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>

Grails 应用程序配置 (application.yml) 如下所示：

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

完成所有这些设置后，我在浏览器中收到消息：

无法加载https://example.com/someResources：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头的值为“ http://localhost:52449 ”，即不等于提供的来源。因此，不允许访问来源“ https://something.cloudfront.net ”。

我真的很困惑为什么我会看到http://localhost:52449？我已经构建了 react 应用程序并将静态文件复制到 CDN 中，http://localhost:52449是 react 应用程序在本地启动时的地址npm start。

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

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);
    );

编辑1：

在此处输入图像描述

我做错了什么，因此 CORS 问题仍然存在？

标签： reactjsamazon-web-servicesgrailscorscdn

解决方案

我为此挣扎了几天！反应 AWS API 和 COR。

这时候我正在使用 fetch 和 axios。

答案是去掉所有的标题。正如到处所说的那样，标头是服务器端的东西。报告的错误似乎是 CORS / preflight，解决方案在于选项过程。我尝试了一切，今天早上我删除了 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 问题。我知道 fetch 与旧浏览器有关。

其中 postUrl 是用于在浏览器中测试 API 的 URL。

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

推荐阅读