CORS error on Backend Function

[Julian_Ezequiel_Pico]

I’m getting a CORS error when trying to use a Backend Function:

Access to fetch at 'https://....execute-api.us-west-2.amazonaws.com/.../.../...' from origin 'https://....dev.8thwall.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I’m following the Tutorials but nothing mentions this. I’ve tried everything. Here is my current code:

import {datoCmsConfig} from 'backends/dato-cms-config'

const configFetch = async (
  input: RequestInfo,
  init?: RequestInit
) => {
  console.log('Input: ', JSON.stringify(input))
  console.log('Init: ', JSON.stringify(init))

  const modifiedInit = {
    ...init,
    mode: 'no-cors' as RequestMode,
    headers: {
      ...init?.headers,
      'Content-Type': 'application/json',
    },
  }
  const res: Response = await datoCmsConfig(input, modifiedInit)
  if (!res.ok) {
    const errorBody = await res.json()
    throw new Error(errorBody.message || 'Error fetching from backend function')
  }
  return res.json()
}

export {
  configFetch,
}

configFetch is exported in the module.js file and utilized by my 8th Wall project like this:

import * as DatoCMS from 'dato-cms-function'
window.DatoCMS = DatoCMS

const datoCmsComponent = {
  init() {
    DatoCMS.configFetch({
      path: '/config',
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
      },
    })
  },
}

export {datoCmsComponent}

Where dato-cms-function is the Function created.

Thanks

[GeorgeButler]

Hi, welcome to the forums!

It looks like you’re setting no-cors on the request payload which means that you’re not able to access the response body or headers. Can you turn off no-cors and take a look at the response headers and body and share them here, or through DM if they have sensitive information. The response headers will tell us if the Backend Function is setting CORs correctly.

[Julian_Ezequiel_Pico]

GeorgeButler

19h

Hi, welcome to the forums!

It looks like you’re setting no-cors on the request payload which means that you’re not able to access the response body or headers. Can you turn off no-cors and take a look at the response headers and body and share them here, or through DM if they have sensitive information. The response headers will tell us if the Backend Function is setting CORs correctly.

Hi George, thanks for the welcome and the answer.

I’ve changed the approach a bit to use a Proxy instead of a Backend Function. The CORS problem still happens, but let me share the new code with you.

Proxy Config

{
  "type": "proxy",
  "baseUrl": "https://graphql.datocms.com/",
  "headers": {
    "Authorization": {
      "type": "literal",
      "value": "Bearer {mytoken}"
    },
    "Content-Type": {
      "type": "literal",
      "value": "application/json"
    },
    "Accept": {
      "type": "literal",
      "value": "application/json"
    }
  },
  "routes": [
    {
      "name": "getContent",
      "id": "fa1d6647-d04a-4f8a-a9bf-5550f2458a67",
      "url": "",
      "methods": ["GET"],
      "headers": {}
    }
  ],
  "title": "dato-cms-proxy",
  "description": ""
}

Code that uses the Proxy

import {getContent} from 'backends/dato-cms-proxy'

const configFetch = async (
  input: any,
  init?: RequestInit
) => {
  console.log('Country code: ', input)

  const configQuery = ... 
  const response: Response = await getContent(
    {
      method: 'POST',
      body: JSON.stringify({
        query: configQuery,
      }),
    }
  )

  const value = await response.json()
  console.log('Response: ', value)
  console.log('Response: ', value.data)
  return value.data
}

export {
  configFetch,
}

Console Log

Access to fetch at 'https://....execute-api.us-west-2.amazonaws.com/julianepico-default/julianepico-default/...' from origin 'https://julianepico-default-julianown.dev.8thwall.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this errorAI
app8-llffcbpc.js:1 

POST https://3uvkvb77id.execute-api.us-west-2.amazonaws.com/julianepico-default/julianepico-default/vLNgx9mdXYeR1g3i_SNPQR7yTvl9cqsDr_iV4zJQX0s net::ERR_FAILED 403 (Forbidden)

Response Headers

Apparently now it’s an HTTP 403 Error, but it’s not clear to me what’s happening…