使用 React 的 AWS CDN 上的 CORS 问题

Posted 2023-03-04

【中文标题】使用 React 的 AWS CDN 上的 CORS 问题

【英文标题】：CORS issue on AWS CDN with React

【发布时间】：2018-12-30 22:12:25

【问题描述】：

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

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

CORS 配置看起来与 AWS guide 上的配置相同，当然除了 exemple.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 问题仍然存在？

【参考方案1】：

您可以永久地将 AllowedOrigin 设置为 *

但是你需要根据你的 react 应用域设置一个有效的值

【参考方案2】：

能否请您粘贴网络调试器请求/响应标头？ 请确保在 PreFlight Request Header 中发送的 Request Header 中可以看到的 1-Origin 与 1-"Access-Control-Allow-Origin 匹配”。还有您根据请求调用的 HTTP 方法，标头明智和动词明智 2-"Access-Control-Request-Headers" & 3-"Access-Control-Request-Method" 应符合响应头参数：2-"Access-Control-Allow-Headers" 和 3-"Access-Control-Allow-Methods" 在响应上。否则 Pre-flight(OPTION) 请求将失败。

也许您的浏览器正在缓存页面。这就是为什么如果你从网络调试模式而不是控制台追溯它，你可以更容易地追溯问题。 Pre-Flight Network Debugging on Chrome

【参考方案3】：

我为此苦苦挣扎了几天！反应 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，这应该很容易。著名的遗言...