# Why does using OpenAI API to generate image not work

**URL:** <https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939>\
**Category:** Technical Support\
**Tags:** openai, studio\
**Created:** [August 5, 2025, 11:15am UTC](https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939 "2025-08-05T11:15:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nadia\_Marzuki](https://avatars.discourse-cdn.com/v4/letter/n/4bbf92/32.png) [@Nadia\_Marzuki](https://forum.8thwall.com/u/Nadia_Marzuki)\
**Post date:** [August 5, 2025, 11:15am UTC](https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939/1 "2025-08-05T11:15:08Z")

</div>

Hi there. I successfully did the chat completions api but when i change the endpoint and body for image generations i get a “Failed to fetch” error.

try {  
const openaiResponse = await fetch(‘[https://api.openai.com/v1/chat/completions’](https://api.openai.com/v1/chat/completions%E2%80%99), {  
method: ‘POST’,  
headers: {  
‘Authorization’: `Bearer ${API_KEY}`,  
‘Content-Type’: ‘application/json’,  
},  
body: JSON.stringify({  
model: ‘gpt-4o’,  
messages: [  
{ role: ‘system’, content: ‘You are a helpful game assistant.’ },  
{ role: ‘user’, content: prompt }  
],  
temperature: 0.7,  
}),  
})

```auto
    if (!openaiResponse.ok) {
      const jsonResp = await openaiResponse.json()
      return {
        statusCode: openaiResponse.status,
        body: JSON.stringify({
          success: false,
          error: jsonResp,
        }),
      }
    } else {
      const jsonResp = await openaiResponse.json()
      return {
        statusCode: openaiResponse.status,
        body: JSON.stringify({
          success: true,
          imageInfo: jsonResp,
        }),
      }
    }
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'OpenAI API call failed' }),
    };
  }

```

and i check the response in game.js like this

game(‘/startGame’, {  
method: ‘POST’,  
})  
.then((body) =\> {  
if(!body.data.success){  
console.log(‘checking body success’)  
AIWord = JSON.stringify(body.data.error, null, 2)  
} else {  
AIWord = JSON.stringify(body.data.imageInfo, null, 2)  
}  
})  
.catch((err) =\> {  
console.error(err)  
})

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [August 5, 2025, 9:33pm UTC](https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939/2 "2025-08-05T21:33:45Z")

</div>

If you run the code outside of 8th Wall does it fetch without errors?

---

<div class="post-metadata">

**Author:** ![Nadia\_Marzuki](https://avatars.discourse-cdn.com/v4/letter/n/4bbf92/32.png) [@Nadia\_Marzuki](https://forum.8thwall.com/u/Nadia_Marzuki)\
**Post date:** [August 6, 2025, 3:08am UTC](https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939/3 "2025-08-06T03:08:34Z")

</div>

Hi George, I tested using Postman and received successfull response. Any idea how to make it work on 8thWall?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [August 6, 2025, 3:49pm UTC](https://forum.8thwall.com/t/why-does-using-openai-api-to-generate-image-not-work/7939/4 "2025-08-06T15:49:14Z")

</div>

Sounds like you’re probably running into a CORs issue. You probably need to Proxy your request through a [Backend Function](https://www.8thwall.com/docs/studio/essentials/modules/backend-services/backend-functions/)(I also recommend doing this to avoid leaking your API key on the client side)

> **[Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS)**
>
> Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by...