Question

Adding CORS to App Spec .yaml in a Serverless Static App

Hello I am using the Apps to serve a static website and want it to connect to an API

I am following the instructions

here https://docs.digitalocean.com/products/app-platform/reference/app-spec/

and here https://docs.digitalocean.com/products/app-platform/how-to/configure-cors-policies/

also https://registry.terraform.io/providers/digitalocean/digitalocean/latest/docs/resources/app#cors

But the format provided is not accepted when trying to add tot the Apps “App Spec” document Any ideas please

(also I added to the code from “services:” down the rest is pre-generated).

alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
- disabled: true
  rule: DEPLOYMENT_STARTED
- rule: DEPLOYMENT_LIVE
- rule: DOMAIN_LIVE
domains:
- domain: www.mywebsite.co.uk
  type: PRIMARY
- domain: app.mywebsite.co.uk
  type: ALIAS
- domain: admin.mywebsite.co.uk
  type: ALIAS
ingress:
  rules:
  - component:
      name: mywebsite-web-app-live
    match:
      path:
        prefix: /
name: mywebsite-web-app-live
region: lon
static_sites:
- catchall_document: index.html
  environment_slug: html
  github:
    branch: main
    deploy_on_push: true
    repo: MYCOMPANY/mywebsite-web-app-live
  name: mywebsite-web-app-live
  source_dir: /
services:
- cors:
    allow_origins:
    - prefix: https://api.mywebsite.co.uk
    - prefix: https://*.mywebsite.co.uk
    - prefix: https://mywebsite.co.uk

Also this link appiles you can use a UI to add cors but there is no option so might be outdated

https://docs.digitalocean.com/products/app-platform/how-to/configure-cors-policies/


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Greg M
DigitalOcean Employee
DigitalOcean Employee badge
June 21, 2023

Hey Phil, the CORS policies have moved under ingress rules. When you add a rule for your static site component, e.g.:

ingress:
  rules:
  - component:
      name: mywebsite-web-app-live
    match:
      path:
        prefix: /

add your CORS policy in the rule:

ingress:
  rules:
  - component:
      name: mywebsite-web-app-live
    match:
      path:
        prefix: /
    cors:
      allow_origins:
      - prefix: https://api.mywebsite.co.uk
      - prefix: https://*.mywebsite.co.uk
      - prefix: https://mywebsite.co.uk
Bobby Iliev
Site Moderator
Site Moderator badge
June 21, 2023

This comment has been deleted

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel