Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PetroGromovo's avatar

I got CORS policy error using vue-img-watermark plugin

Hello, In my @vue/cli 4.0.5 app with Laravel 7 Backend API as data source I want to add watermark to my image “on fly” I found this https://www.vuescript.com/custom-watermarks/ example and try to use it but I got error in console :

Access to image at 'http://local-ctasks-api.com/storage/tasks/-task-3/design-new-task.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
design-new-task.png:1 GET http://local-ctasks-api.com/storage/tasks/-task-3/design-new-task.png net::ERR_FAILED

where http://local-ctasks-api.com/ is hosting of Laravel Backend API on my local ubuntu apache. To escape CORS error I use "barryvdh/laravel-cors": "^1.0.5" on Laravel Backend API side and it works for me.

I do in my vue file :

<img
    v-if="taskHasImage(taskRow)"
    class="pull-left m-1 p-1 task_image"
    :src="taskRow.filenameData.image_url"
    alt="Task Image"
    v-watermark="watermarkOptions"
/>

...

<script>
    import {bus} from '../../../src/main'
    import axios from 'axios'
    ...
    import plugin from '@serializedowen/vue-img-watermark'
    Vue.use(plugin)
    

        data: function () {
            return {
               ... 

                watermarkOptions : {  // eslint-disable-line
                    // "bottomleft", "bottomright", "topleft", "topright", "center", "fill"
                    mode: "bottomright",
                    textBaseline: "middle",
                    font: "15px Arial",
                    fillStyle: "white",
                    content: "@vuescript.com",
                    rotate: 30
                }, // https://www.vuescript.com/custom-watermarks/

Reading description at https://github.com/serializedowen/vue-img-watermark : I see mentioned of setScopedConfig and registerCustomStrategy using but I did not find examples of these methods using. Can it be that I have CORS errors because of misconfiguring of these methods?

Please, give full code of your demo example.

How to fix my error ?

Thanks!

0 likes
2 replies

Please or to participate in this conversation.