1

I'm using S3 static website hosting for a vue 3 frontend, and from this static website I'm trying to do an ajax request to an API. The request has a 200 result with a CORS issue

Reason: CORS header 'Access-Control-Allow-Origin' missing

I'm using axios for the ajax request

axios.post(
   'https://api,
    params,
    {
       headers: { 
          'Content-Type': 'application/x-www-form-urlencoded',
       }
     }
);

I cannot add "Access-Control-Allow-Origin" :"*" to the header because it will trigger a preflight OPTION request and my target API doesn't allow OPTION requests

Here's my S3 cors config

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST"
        ],
        "AllowedOrigins": [
            "*",
        ],
        "ExposeHeaders": [
        ],
        "MaxAgeSeconds": 3000
    }
]

I'm also using cloudfront to bind my static website to a nice url, I have allowed all HTTP methods and I have try pretty much every origin request and response header policies.

I have tried pretty much everything I could get from the docs but now I'm out of ideas. What am I missing? Please help.

Philisup
  • 45
  • 1
  • 5
  • 1
    It doesn't really matter what you do on S3. Your third party API has to allow CORS. If it really doesn't, you need to create a proxy like this https://stackoverflow.com/questions/29670703/how-to-use-cors-anywhere-to-reverse-proxy-and-add-cors-headers – derpirscher Jul 28 '22 at 17:26

0 Answers0