Question

我正在尝试从已部署的React应用程序（AWS S3 CDN）调用grails应用程序上的资源。

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

除了exemple.com之外，CORS配置看起来与在AWS guide上相同。

<?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是使用npm start在本地启动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问题仍然存在？

Answer 1

您能粘贴网络调试器的请求/响应头吗？请确保在预检请求标题中发送的请求标题中可以看到的1- 来源应该与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 ”。否则，飞行前（OPTION）请求将失败。

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

Answer 2

您可以永久将AllowedOrigin设置为*

但是您需要根据您的React应用程序域设置有效值

Answer 3

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

这次我正在使用fetch和axios。

答案是取出所有标头。正如到处都说的那样，标头是服务器端的东西。报告的错误似乎是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，因为结果可以用数据来控制。如果可能的话，我没有解决问题。我了解旧版浏览器存在某些抓取问题。

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

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

带有React

3 个答案: