在 AWS 上部署 angular + spring boot 应用程序 = CORS Policy Header

Question

我是新手，我是初级开发人员。正如标题所说，当我在本地主机上交叉（角度和弹簧引导）时，我有 0 个问题，一切正常。当我将我的 spring boot 项目上传到 amazon RDS + Elastic Bean 时，我没有任何问题，我可以看到数据 json，一切都很好。当我将 localhost:5000/api 更改为 Elastic-link/api 时，问题就出现了。当我将我的 Angular 项目上传到 S3 Bucket 时，新的静态网页链接能够显示我的 Angular 项目，但它不会从数据库加载数据，所以它是一种网页 css 样式，没有来自 DBB 的信息。错误是 CORS Policy Header。

`我做过的事情：

-首先更改查看网页的策略桶。

`{
    "Version": "2012-10-17",
    "Id": "Policy1677147629411",
    "Statement": [
        {
            "Sid": "Stmt1677147510482",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::asds3/*"
        }
    ]
}`

-其次，尝试更改 CORS 策略：

`[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://asds3-env.eba-pyiezwak.eu-west-2.elasticbeanstalk.com/api/*"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://asds.s3-website.eu-west-2.amazonaws.com/api/*"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]`

- 在我的 Spring Boot 项目中，我在 application.properties 中有这些设置：

`spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://asdf.ckpe0hycxkbo.eu-west-2.rds.amazonaws.com:3306/estebanecommerceschema?useSSL=false&useUnicode=yes&characterEncoding=UTF-8&allowPublicKeyRetrieval=true&serverTimezone=UTC
spring.datasource.username = root
spring.datasource.password = Password

spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

spring.data.rest.base-path=/api
spring.datasource.test-while-idle=true
spring.datasource.validation-interval=5000
!-CORS->
allowed.origins = http://localhost:4200

spring.data.rest.detection-strategy=ANNOTATED

!-OKTA->
okta.oauth2.client-id=0oa8cawi5sqld123dsr
okta.oauth2.issuer=https://dev-54341200.okta.com/oauth2/default

#####
#
# HTTPS configuration
#
#####

# Server web port
server.port=5000`

**And this is my angular environment properties:**

`export const environment = {
    production: true,
    Global_URL: "http://asds3-env.eba-pyiezwak.eu-west-2.elasticbeanstalk.com/api"
};
`
Thanks for your time.`

Answer 1

简短回答：您应该添加到允许的方法 OPTIONS，因为浏览器首先使用 OPTIONS 方法进行飞行前调用，以检查服务器是否允许后续请求。

Detailed answer。