0

Im using nuxt 3 and I'm basing my code off of this documentation: https://stablediffusionapi.com/docs/stable-diffusion-api/text2img/

Im just trying to change this image tag's source into whatever the api gives me. Everything is in vue.js.

<template>
    <img id ="hot" @click = "wee()" style = "width:1000px;height:1000px;border:solid;">
</template>

<script>
  import axios from 'axios';

function w(){
    console.log("dsa");
}   

export default {
      methods: {
        async wee(){
            console.log("start");
            var myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("Access-Control-Allow-Origin", "*");
            myHeaders.append("Access-Control-Allow-Headers", "Content-Type");
            myHeaders.append("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");


            var raw = JSON.stringify({
            "key": "THE KEY",
            "prompt": "ultra realistic close up portrait ((beautiful pale cyberpunk female with heavy black eyeliner))",
            "negative_prompt": null,
            "width": "512",
            "height": "512",
            "samples": "1",
            "num_inference_steps": "20",
            "seed": null,
            "guidance_scale": 7.5,
            "safety_checker": "yes",
            "multi_lingual": "no",
            "panorama": "no",
            "self_attention": "no",
            "upscale": "no",
            "embeddings_model": "embeddings_model_id",
            "webhook": null,
            "track_id": null
            });

            var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
            };

            var stuff =axios.post("http://stablediffusionapi.com/api/v3/text2img", requestOptions)
            .then(response => response.text())
            .then(result => console.log(result))
            .catch(error => console.log('error', error));
            document.getElementById("hot").src = stuff;
        }
    }
}


</script>

I keep getting this error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://stablediffusionapi.com/api/v3/text2img. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.

I tried changing the headers, I changed browsers to chrome, and none of the worked. I'm using firefox, and when I checked thier documentation they said going from https to http is going to cause a CORS error. I tried using the same data on postman.co and it worked just fine. I switched to axios instead of fetch to see if that'd help but it didn't.

Is there a way around this or should i Just give up?

Daniel Awoke
  • 1
  • 1
  • Postman doesn't implement CORS, it's a web tool so the request working in Postman is to be expected. Modern browsers all implement CORS for safety and security, and if you have the right headers set then it's up to the backend to confirm that your origin is permitted access to the API service. That permission would have to be set on the actual backend, not something you can control from the frontend. – yoduh Jun 20 '23 at 03:42
  • Possible duplicate of https://stackoverflow.com/questions/10636611/how-does-the-access-control-allow-origin-header-work – Estus Flask Jun 20 '23 at 07:50
  • 1
    Adding Access-Control-Allow-* on client side doesn't make sense, otherwise it would be worthless as security measure. I'd expect api to not have restrictive cors as this limits the ways in which it can be used. But if it does then, that's it. This also possibly means that it's not of good quality and not well-maintained. You need to do the same as usual, i.e proxy the requests through your own endpoints. Since you already have Node server (Nuxt), do this with serverMiddleware. – Estus Flask Jun 20 '23 at 07:56

0 Answers0