- axios config for cors

src/App.vue

@@ -17,7 +17,7 @@
         </a>
       </div> -->
 
-        <vs-input @search-change="onSearch" title="searching solr datasets" placeholder="Enter your search term..." />
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
 
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
             <!-- <div class="tabs is-centered">

src/api/axiosSetup.ts

@@ -1,7 +1,13 @@
 import axios, { AxiosRequestConfig, AxiosInstance, AxiosPromise } from "axios";
 
 const initialization = (config: AxiosRequestConfig): AxiosInstance => {
-    axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    //axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    delete axios.defaults.headers.common["X-Requested-With"];
+    // axios.defaults.withCredentials = true;
+    // const token = document.head.querySelector('meta[name="csrf-token"]');
+    // if (token) {
+    //     axios.defaults.headers.common["X-CSRF-TOKEN"] = token.innerHTML;
+    // }
     const axiosInstance = axios.create(config);
 
     /*

src/api/config.ts

@@ -4,7 +4,12 @@ import * as qs from "qs";
 export const axiosRequestConfiguration: AxiosRequestConfig = {
     responseType: "text",
     headers: {
-        "Content-Type": "application/json",
+        // "Content-Type": "text/plain",
+        "Content-Type": "application/x-www-form-urlencoded",
+        // "Content-Type": "application/x-www-form-urlencoded",
+        // credentials: "same-origin",
+        // "Access-Control-Allow-Credentials": "true",
+        // "Access-Control-Allow-Origin": "*",
     },
     paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
 };

src/components/vs-input/vs-input.ts

@@ -12,11 +12,11 @@ import { Dataset, Suggestion, SearchType } from "@/models/dataset";
     name: "VsInput",
 })
 export default class VsInput extends Vue {
-    @Prop()
-    private title!: string;
+    // @Prop()
+    // private title!: string;
 
     @Prop({ default: "Search" })
-    private placeholder!: string;
+    readonly placeholder!: string;
 
     private display = "";
     private value!: Suggestion;
@@ -31,6 +31,7 @@ export default class VsInput extends Vue {
     };
     private rdrAPI!: DatasetService;
     itemRefs!: Array<any>;
+    emits = ["filter"];
 
     setItemRef(el: any) {
         this.itemRefs.push(el);
@@ -111,10 +112,10 @@ export default class VsInput extends Vue {
         // this.value = null;
         this.results = [];
         this.error = "";
-        this.$emit("clear");
+        // this.$emit("clear");
     }
 
-    @Emit("search-change")
+    // @Emit("search-change")
     search(): string {
         this.results = [];
         // this.$emit("search", this.display)
@@ -202,7 +203,7 @@ export default class VsInput extends Vue {
 
     onEnter(): void {
         if (this.selectedIndex === null) {
-            this.$emit("nothingSelected", this.display);
+            // this.$emit("nothingSelected", this.display);
             return;
         }
         this.select(this.suggestions[this.selectedIndex]);
@@ -210,15 +211,16 @@ export default class VsInput extends Vue {
     }
 
     @Emit("search-change")
-    select(obj: Suggestion): Suggestion {
+    private select(obj: Suggestion): Suggestion {
         // if (!obj) {
         //     return;
         // }
         this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id
         // this.display = obj; // this.formatDisplay(obj)
         this.selectedDisplay = this.display;
-        // this.$emit("search", this.value);
+
         this.close();
+        // this.$emit("update", this.value);
         return this.value;
     }
 
@@ -245,6 +247,6 @@ export default class VsInput extends Vue {
         this.results = [];
         this.error = "";
         //this.removeEventListener()
-        this.$emit("close");
+        // this.$emit("close");
     }
 }

src/components/vs-input/vs-input.vue

@@ -1,16 +1,16 @@
 <template>
+    <div>
         <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
             <div class="field has-addons">
                 <div class="control is-expanded">
                     <input
+                        v-on:input="searchChanged"
                         id="search_query"
                         class="input is-medium"
                         type="text"
                         name="q"
                         autocomplete="off"
                         v-model="display"
-                    v-on:input="searchChanged"
-                    v-bind:title="title"
                         v-bind:placeholder="placeholder"
                         v-on:keydown.down="onArrowDown"
                         v-on:keydown.up="onArrowUp"
@@ -18,7 +18,7 @@
                         @keydown.tab="close"
                         v-on:focus="focus"
                     />
-                <!-- <p>Message is: {{ display }}</p> -->
+                    <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
                 </div>
 
                 <div class="control">
@@ -47,6 +47,7 @@
                 </li>
             </ul>
         </div>
+    </div>
 </template>
 
 <script lang="ts">

src/services/dataset.service.ts

@@ -14,6 +14,7 @@ export class DatasetService {
         // const host = 'https://www.tethys.at/';''
         const host = "https://" + solrHost;
         const path = "/solr/" + solrCore + "/select?";
+        // const base = "https://geomon.geologie.ac.at/52n-sos-webapp/api/features"; //host + path;
         const base = host + path;
 
         //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    publicPath: "/test" 
+ }