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

afletcher's avatar

Searching Elasticsearch from Vue

Good afternoon!

I'm attempting to search my elasticsearch repository through vue + axios.

 import axios from 'axios';
    import { loadProgressBar } from 'axios-progress-bar'
    import 'axios-progress-bar/dist/nprogress.css'

    loadProgressBar();


    const query = {
        query: {
            match: {
                "_source": true

    }
        }
    };

    axios.get('http://test.lar:9200/output/_search', {
        params: {
            source: JSON.stringify(query),
            source_content_type: 'application/json'
        }
    }).then((res) => {
        console.log(res);
    });

    export default {


        data: function() {
            return {
                outputs: []
            }
        },


        mounted() {
            axios.get('/api/output')
                .then((response) => {
                    this.outputs = response.data;
                    console.log('Outputs loaded')
                })
                .catch((err) => {
                    console.log(err);
                });



        },

    }

Now if i curl / manually check the elasticsearch it works fine (http://192.168.10.10:9200/) returns repository status. However I'm getting an error message of

outputs:1 Access to XMLHttpRequest at 'http://test.lar:9200/output/_search?source=%7B%22query%22:%7B%22match%22:%7B%22_source%22:true%7D%7D%7D&source_content_type=application%2Fjson' from origin 'http://test.lar' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Now I don't have a CORS policy as far as I'm aware?

How do I rectify this, and what is a CORS policy?

0 likes
1 reply
afletcher's avatar

Oh, the mounted() axios.get is just a call to test a restful API, to see if it worked before I implemented the elasticsearch

Please or to participate in this conversation.