Amazon aws s3 and ec2 CORS for Full Stack web (angular 2/spr

Question

这是我所做的：我使用 Angular 2 创建了前端，并使用 Spring boot 创建了后端代码。然后在我的前端代码中，我使用 EC2 地址(在前端(对我的 api 地址进行硬编码，并在 Spring 启动的 Filter 类中对我的前端地址(S3 地址(进行硬编码，以摆脱 CORS 问题。

然后在前端运行ng build --prod以获取部署静态文件，在后端运行mvn package以获取jar文件。将jar文件上传到EC2实例，后端部分成功启动。

现在将所有静态文件上传到 S3 存储，并运行 S3 域，我收到以下错误：

Failed to load ec2-35-182-225-61.ca-central-1.compute.amazonaws.com:8080/api/refresh: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 

是否有任何教程使用 S3 和 EC2 链接前端和后端？

编辑：在我通过trichetriche的答案在S3部分添加CORS后，我得到了新的错误

main.e4936af900574d09c368.bundle.js:1 ERROR DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/polyfills.b3f1cff0521ef8205be4.bundle.js:1:56874
    at XMLHttpRequest.o.(anonymous function) [as open] (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/polyfills.b3f1cff0521ef8205be4.bundle.js:1:20687)
    at t._subscribe (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:424047)
    at t._trySubscribe (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:7030)
    at t.subscribe (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:6859)
    at e.a (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:745892)
    at e._innerSub (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:748287)
    at e._tryNext (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:748211)
    at e._next (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:748034)
    at e.next (http://cloud.eatr.com.s3-website.ca-central-1.amazonaws.com/main.e4936af900574d09c368.bundle.js:1:9365)

Answer 1

您是否设置了 S3 的 CORS？

在 S3 配置中，您应该添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
   <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这位于"Permissions"选项卡下，在 CORS Configuration

(完成测试后，请记住将来源设置为您的域(