带React的AWS CDN上的CORS问题

我正在尝试从部署的react应用程序(aws s3 cdn)到grails应用程序上的资源进行REST调用。

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

CORS配置看起来与AWS上的配置相同 guide except example.com of course.

<?xml version=“1.0”encoding=“utf-8”?gt;
<corsconformation xmlns=“http://s3.amazonaws.com/doc/2006-03-01/”>
<corsrule>
<allowedorigin>https://example.com</allowedorigin>
<allowedmethod>获取</allowedmethod>
<allowedmethod>输入</allowedmethod>
<allowedmethod>发布</allowedmethod>
<allowedmethod>删除</allowedmethod>
<maxageseconds>3000</maxageseconds>
<exposeheader>etag</exposeheader>
<exposeheader>x-amz-meta-custom-header</exposeheader>
<allowedheader>*</allowedheader>
</corsrule>
</corsconformation>
Grails应用程序配置(application.yml)如下所示:

grails:
科斯:
启用:真
允许来源:
-“https://something.cloudfront.net”
在所有这些设置中,我在浏览器中得到消息:

< Buff行情>
未能加载https://example.com/someresources:response to
飞行前请求未通过访问控制检查:
“访问控制允许来源”标题有一个值
'http://localhost:52449'that is not equal to the supplied origin.
origin'https://something.cloudfront.net'is because not allowed
访问。



这真的让我困惑,为什么我要看到http://localhost:52449“rel=”nofollow noreferr“>http://localhost:52449>?我已经构建了react应用程序并将静态文件复制到cdn中,http://localhost:52449is the address when react app is started locally withnpm start.>code>。


用于进行REST调用的反应代码如下所示:

axios.get<any>('https://example.com/someresources',
{
带证书:真的,
标题:{
“content type”:“应用程序/json”,
“accept”:“应用程序/json”,
“x-requested-with”:“xmlhttprequest”
}
})
。然后((响应)=>
console.log(响应);
;

编辑1:。



我做错了什么,所以CORS问题仍然存在?

CORS配置与AWS上的配置相同guide当然除了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:响应
飞行前请求未通过访问控制检查:
“访问控制允许来源”标题有一个值
’http://localhost:52449'这不等于提供的来源。
原点'https://something.cloudfront.net'因此不允许
访问。


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

用于进行REST调用的反应代码如下所示:

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问题仍然存在?