Software

I have countries and cities jsons that comes from backend. And I want to make in the vuejs when I select a country in the cities select to have the cities from that country.

I got stuck here and I have no idea how to bring the cities only for that country that is selected.

Can someone please give me a little help?

Countries JSON

GET /languages/countries (list of countries)

{ "errorCode": 0, "errorMessage": null, "contries": [ { "errorCode": 0, "errorMessage": null, "rid": "1", "sortname": "AF", "name": "Afghanistan", "phonecode": 93, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "2", "sortname": "AL", "name": "Albania", "phonecode": 355, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "3", "sortname": "DZ", "name": "Algeria", "phonecode": 213, "links": [] } ], "links": [] }

Cities JSON

GET /languages/countries/1 (list of cities for country with id =1)

{ "errorCode": 0, "errorMessage": null, "cities": [ { "errorCode": 0, "errorMessage": null, "rid": "33129", "name": "Abrud", "stateId": 2934, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "33130", "name": "Aiud", "stateId": 2934, "links": [] }, { "errorCode": 0, "errorMessage": null, "rid": "33131", "name": "Alba Iulia", "stateId": 2934, "links": [] } ], "links": [] }

VueJS script

export default { data() { return { users: {}, countries: {}, cities: {} } }, created() { this.getUsers(); this.getCountries(); this.getCities(); }, methods: { getUsers() { this.$http.get("/user") .then((response) => { this.users = response.data.users; }) }, getCountries() { this.$http.get("/languages/countries") .then((response) => { this.countries = response.data.contries; }) }, getCities() { this.$http.get("/languages/countries/"+this.country.rid) .then((response) => { this.cities = response.data.cities; }) }, }, components: { appMenu: Menu } }

HTML Selects

<div class="form-group"> <div class="row"> <div class="col-6 pz-rel"> <label class="eda-form-label" for="country">COUNTRY</label> <select class="eda-form-input"> <option v-for="country in countries" :value="country.name">{{country.name}}</option> </select> <i class="ti-angle-down icons-for-select"></i> </div> <div class="col-6 pz-rel"> <label class="eda-form-label" for="city">CITY</label> <select class="eda-form-input"> <option v-for="city in cities" :value="city.name">{{city.name}}</option> </select> <i class="ti-angle-down icons-for-select"></i> </div> </div> </div>

I'm having this problem where i cant use next('/login'). This is my code:

*/ all imports that are needed Vue.use(Router); const routes = [ {path: '/', component: Home}, {path: '/admin', component: Admin}, {path: '/login', component: Login}] var route = new Router({ routes: routes, mode: 'history' }); route.beforeEach((to, from , next) => { console.log(to.fullPath) next('/login'); }); new Vue({ el: '#app', router: route, template: '<App/>', components: { App } })

It works when i only use next() but when i give the next() function a route it's stuck within an infinite loop

console screenshot

I have a Personnel table bound to an array of objects that is coming from VueJs. The last column on the table is a button for editing each record.

I'd like to show a modal popup when the edit button is clicked and bind the textboxes to the properties of the personnel that I want to edit. It should update the table and the source of the data when the save button on the modal popup is clicked.

But I am stuck on passing the object or even just the key to the component so I can load the data or bind the edited object into my textboxes.

JS

var app = new Vue({ el: '#my-app', data: { personnels: [ { id: 1, firstName: 'Billy', lastName: 'Bob', email: 'bb@kewl.com' }, { id: 2, firstName: 'Mike', lastName: 'Coilers', email: 'mco@kewl.com' }, { id: 3, firstName: 'Fred', lastName: 'Just', email: 'freju@gmail.com' }, { id: 4, firstName: 'Tori', lastName: 'Drury', email: 'smstua@gmail.com' } ] }, methods: { showPersonnelEditor: function () { // how do i pass data to the personnelEditor component? } } }); Vue.component('personnel-editor', { prop: ['personnel'] });

HTML

<div id="my-app"> <table classs="table" width="100%"> <tr> <th> Id </th> <th> First Name </th> <th> Last Name </th> <th> Email </th> <th> Actions </th> </tr> <tr v-for="personnel in personnels"> <td> {{ personnel.id }} </td> <td> {{ personnel.firstName }} </td> <td> {{ personnel.lastName }} </td> <td> {{ personnel.email }} </td> <td> <button v-on:click="showPersonnelEditor">Edit</button> </td> </tr> </table> <personnel-editor inline-template><div class="modal fade" > <div class="modal-dialog"> <div class="modal-header"> header </div> <div class="modal-content"> <div class="form-group row"> <div class="col-lg-12"> <label>Id</label> <input type="text" v-model="personnel.Id" /> </div> <div class="form-group row"> <div class="col-lg-12"> <label>First Name</label> <input type="text" v-model="personnel.firstName" /> </div> </div> </div> <div class="form-group row"> <div class="col-lg-12"> <label>Last Name</label> <input type="text" v-model="personnel.lastName" /> </div> </div> <div class="form-group row"> <div class="col-lg-12"> <label>Email</label> <input type="text" v-model="personnel.Email" /> </div> </div> </div> <div class="modal-footer"> oh mah foot </div> </div> </div> </div></personnel-editor>

I am building a hotel booking application and now i am working with booking part, Here i am giving an option for the user to edit the preferred room type and the number of adults, number of children using select box. In clear, say if the user selected the room type as standard room and one adult and no children, then we can get the default price value that was already stored in that particular room. I have attached the fiddle upto the this step and the fiddle link was https://jsfiddle.net/c1ud4mkv/. I am in the need of help after this only if the user needs to stay with 2 adults and 1 or two children then the price needs to changed accordingly. (ie.) The price as of now for standard room type with 1 adult was Rs.1000, If the user wants to add extra 1 adult means the price needs to change to Rs.2000, And if the user needs to add 1 children along with 2 adults means the price needs to be calculated as Rs.3000 (Rs.2000 + Rs.1000) (Rs.1000 is price for extra 1 child). I am unable to find solution for doing this, kindly make a help for me..

The HTML code is:

<div id="app"> <table> <thead> <td>Room Type</td> <td>Adult</td> <td>Children</td> <td>Total Price</td> </thead> <tbody> <tr v-for="(row, index) in rows"> <td> <select data-value="Room Type"> <option v-for="room in rooms">{{room.title}}</option> </select> </td> <td> <select data-value="1 Adult"> <option value="1">1 Adult</option> <option value="2">2 Adults</option> </select> </td> <td> <select data-value="No Child"> <option value="1">No Child</option> <option value="2">1 Child</option> <option value="3">2 Children</option> </select> </td> <td v-for="item in items"> {{item.price}} </td> </tr> </tbody> </table> <div class="add-remove"> <div class="col-md-6 text-center add"> <a @click="addRoom" class="add-room"> Add Room </a> </div> <div class="col-md-6 text-center remove"> <a @click="removeRoom(index)" class="remove-room"> Remove Room </a> </div> </div> </div>

And the script was:

new Vue({ el: '#app', data: { rows: [], rooms: [ { value:0, title: 'Standard Room' }, { value:0, title: 'Deluxe Room' }, ], items: [{ price: 1000, }] }, methods: { addRoom: function() { var elem = document.createElement('tr'); this.rows.push({ }); }, removeRoom: function(index) { this.rows.splice(index, 1); }, } })

And jsfiddle link was https://jsfiddle.net/c1ud4mkv/

Hi I want to access msg inside my template how can achieve this in vuejs? my webpack watcher is having an error " - text "{{msg}}" outside root element will be ignored."

<template> {{msg}} <form action="post" enctype="multipart/form-data" v-on:submit.prevent="addPension"> <button type="submit" class="btn btn-success">submit </button> </form> </template> <script> export default { data: () => ({ msg : 'new messages' }), created() { } }

I have working code in VueJS however need a certain block to run sequentially:

return Promise.all(this.vm.multipleActions.run.map(function (testRun) { return self.initiateTest(testRun); }))

Currently it seems this runs in parallel - so in initiateTest() I insert records into a DB however parallel gets me random ordering instead of the testRuns in order (which I'd like to preserve).

I can observe the AJAX calls in initiateTest() made randomly due to the parallel nature.

Today Mozilla is announcing the launch of “Global Mission Partners: India”, an award program specifically focused on supporting open source and free software.  The new initiative builds on the existing “Mission Partners” program. Applicants based in India can apply for funding to support any open source/free software projects which significantly further Mozilla’s mission.

Our mission, as embodied in our Manifesto, is to ensure the Internet is a global public resource, open and accessible to all; an Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.

We know that many other software projects around the world, and particularly in India, share the goals of a free and open Internet with us, and we want to use our resources to help and encourage others to work towards this end.

If you are based in India and you think your project qualifies, Mozilla encourages you to apply.  You can find the complete guidelines about this exciting award program on Mozilla’s wiki page.

The minimum award for a single application to the “Global Mission Partners: India” initiative is ₹1,25,000, and the maximum is ₹50,00,000.

The deadline for applications for the initial batch of “Global Mission Partners: India” is the last day of September 2017, at midnight Indian Time. Organizations can apply beginning today, in English or Hindi.

You can find a version of this post in Hindi here.

The post A ₹1 Crore Fund to Support Open Source Projects in India appeared first on The Mozilla Blog.

I deployed my Vue.js SPA app with Google Cloud's Storage Bucket.

Google's balancer does not let me configure the redirection from HTTPS to HTTP. The .htaccess file is not acknowledged either (at least, as per other StackOverflow questions I stumbled upon).

How do I enforce the redirection from HTTP to HTTPS in the context of GCP's storage bucket?

I was thinking about modifying the Router itself in my application, but

• it's a dirty hack;
• leads to unnecessary extra call;
• technically does not seem to be solvable -- routes are expressed as relative to domain root anyway (i.e. i don't have the schema+domain information to use for programmatic redirect, as in /, /resume, /manifesto)...

I have a table with an edit button and an edit form dialog:

<v-data-table v-bind:headers="headers" v-bind:items="packets" v-bind:search="search" > <template slot="items" scope="props"> <td> {{ props.item.name }} </td> <td class="text-xs-right">{{ props.item.folder }}</td> <td class="text-xs-right"> <EditPacketDialog></EditPacketDialog> <!-- #### NEED TO PASS IN PROPS DATA. HOW? --> </td> </template> <template slot="pageText" scope="{ pageStart, pageStop }"> From {{ pageStart }} to {{ pageStop }} </template> </v-data-table>

And a form I'd like to show when I click the edit button on my table:

<template> <v-layout right row > <v-dialog v-model="dialog" width="50%"> <v-btn outline small fab slot="activator" class="indigo--text" @click="editPacket"> <v-icon>edit</v-icon> </v-btn> <v-card> <v-card-title> <span class="headline">Edit Packet</span> </v-card-title> <v-card-text> <v-text-field label="Name" required></v-text-field><!-- #### SET THE FIELD --> <v-select label="Documents" multiple autocomplete chips :items="['WorkTime', 'Firm & Branch Financials', '2017 Firm Financial Letter', 'Systems Ideas', 'MyFirstDocument']" ></v-select> <small>*indicates required field</small> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Close</v-btn> <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Save</v-btn> </v-card-actions> </v-card> </v-dialog> </v-layout> </template> <script> export default { data () { return { dialog: false } } } </script>

Since the dialog ( form ) was so large, I wanted to separate it out from the table code, however, I am not sure how to pass the props.item.name and props.item.folder into the child component. What is the correct way to identify the row/data I'd like to edit?

I am working with vue-form-wizard plugin by https://github.com/cristijora/vue-form-wizard but I am having trouble with v-for, when I set the attribute "prop" with the "option" It validates all the radio inputs but is not validating correctly.

I figured out that I need to set the prop attr like prop="test.option" where test is my array, but since it is a loop the array name is on the key but I am not able to do this with vue prop="key.option"

<div id="app">

<div v-for="(gu, key, index) in formInline" data-row-span="6"> <el-form-item label="Approved by" prop="radio" :rules="rules.xx.radio2"> <el-radio-group v-model="gu.radio"> <el-radio :label="'3'">optionA</el-radio> <el-radio :label="'6'">optionB</el-radio> </el-radio-group> </el-form-item> </div> </el-form> </tab-content> <el-button type="primary" slot="prev">Back</el-button> <el-button type="primary" slot="next">Next</el-button> <el-button type="primary" slot="finish">Finish</el-button> </form-wizard>

https://jsfiddle.net/bt5dhqtf/900/

I have a VueJs dynamically generated table made up with an array, which comes from a Laravel backend. This works fine.

I would like to manipulate the array (delete, add, change values, etc.) in the VueJS, send it back to Laravel, have it processed and refresh the page with the new array.

Since I am still learning, for now all I am trying to achieve is this: send the same array back to Laravel, return it back and have the page refreshed with "new" array.

What I have:

vue.js:

Vue.component('word', { props: ['word-list'], template: '#word-template', methods: { increment: function () { axios.post('/update',this.wordList); } }, }); new Vue({ el: '#root' });

HTML:

<div id="root"> <word :word-list="{{json_encode($commonWords) }}"></word> </div> <template id="word-template"> <table class="table"> <thead> <tr> <th>Key</th> <th>Value</th> <th></th> </tr> </thead> <tbody> <tr v-for="(value, key) in wordList" :wordList="wordList"> <td> @{{ key }} </td> <td> @{{ value }} </td> <td><button v-on:click="increment" class="button">Refresh</button></td> </tr> </tbody> </table> </template>

Laravel:

public function update() { $commonWords = request()->toArray(); return view('words.show', compact('commonWords')); }

What works: I am hitting the backend, it properly receives the array and sends it back. So the Laravel part works fine.

But how can I refresh the table with the new array?

I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?

I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.

Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).

<div id="vuemain"> <span v-if="diced < 6">Looser</span> <span v-if="diced == 6">Winner</span> <a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a> </div>

So after rendering by VueJS the <a> tag should be like:

<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->

OR

<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->

Do you understand what my problem is and is that somehow possible?

Many thanks in advance

Allan

I'm trying to populate an empty array with a declared array variable in a computed function. I tried this but with no luck:

data: { hashtags: [] }, computed: { filteredHashtags () { var defaultHashtags = [ '#hr', '#acc', '#sales' ]; var fHashtags = _.chain( messages ) .pluck( 'hashtags' ) .flatten() .map( function ( tag ) { return tag && tag.trim() ? '#' + tag : null; }) .filter( Boolean ) .value(); fHashtags = _.union( fHashtags, defaultHashtags ); return fHashtags = data.hashtags; } }

I am trying to learn Vue.JS, and the component I have made is not rendering on the page. This is my component:

import Vue from 'vue' const card = new Vue({ el: '#card', data: { title: 'Dinosaurs', content: '<strong>Dinosaurs</strong> are a diverse group of animals from the clade <em>Dinosauria</em> that first appeared at the Triassic period.' } })

This is my html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Practice</title> </head> <body> <div id="card"> <header>{{ title }}</header> <div v-html="content"></div> </div> <script src="bundle.js"></script> </body> </html>

And this is package.json (I realize most of the dependencies belong in devDependencies):

{ "name": "vue-practice", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "bundle": "browserify -t babelify -t vueify -e main.js > bundle.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babelify": "^7.3.0", "browserify": "^14.4.0", "vue": "^2.4.2", "vueify": "^9.4.1" }, "devDependencies": {} }

When I load index.html in the browser, all it renders is {{ title }} and I am receiving no errors. Any explanation as to why this is happening would be appreciated!

I have 2 dates in a component—validFrom and validUntil—and the validation is that validFrom is required, and validUntil is optional but if present must be after validFrom. I'm struggling to figure out how to set up Vuelidate validations to capture this. To complicate it further, some of these data elements might not be present, so I'm also using dynamic validations to only return data about the dates if the component has them. Here's a simplified version of the data and validations I've got so far:

data: () => ({ editedEventData: { name: '', signupData: { code: '', validFrom: null, validUntil: null } } }), validations: { editedEventData: { name: { required, minLength: minLength(1), maxLength: maxLength(20) } }, signupData: { code: { maxLength: maxLength(20) }, validFrom: { required }, validUntil: { isAfterFrom (value) { return date.getDateDiff(this.eventData.signupData.validFrom, value) < 0 } } } }

That kind of works when validUntil changes, but it doesn't update the validation when validFrom changes. I put a console.log() into the isAfterFrom() function, and I can see it is recomputed when validUntil is changed, but appears not to be dependent on validFrom. I guess simply accessing this.eventData.signupData.validFrom in the validation isn't enough. I also tried calling $v.editedEventData.signupData.validUntil.$touch() when validFrom is changed, but still nothing.

Is there some way to recompute that validation when another field changes?

How I can update a vuex store by commiting things from main proccess? for example:

In main thread:

import store from ../store ipc.on('someevent', (event, args) => { // do stuff with args store.commit('update-things') })

and in the renderer update components with these modifications.

Edit: Real code:

main.js

import store from '../store' const {ipcMain} = require('electron') const WebTorrent = require('webtorrent') const client = new WebTorrent() ipcMain.on('addMagnet', (event, arg) => { client.add(arg, function (torrent) { var files = [] torrent.files.forEach(function (file) { files.push({ title: file.name, torrent: torrent.infoHash, index: torrent.files.indexOf(file), duration: '--:--' }) }) store.commit('addSongs', files) })

and store mutation is like:

addSongs (state, newSongs) { newSongs.forEach(function (song) { state.songs.push(song) }) }

store is in diferent directory that main.js if it's helps.

I am new to javascript and Vue.js

I am making a POST API call in Vuejs using axios and my backend is in node.js. I am getting error in the authorisation. It works fine in postman

My POST API Call is as follows:

import Vue from 'vue' import router from '../router' import axios from 'axios' const API_URL = 'http://localhost:8000/api/' const LOGIN_URL = API_URL + 'login' export default { login(credentials, redirect) { console.log(LOGIN_URL) axios.post(LOGIN_URL,{ headers: { 'Authorization': 'Basic YWtzaGF5OmFrc2hheQ==', 'Content-Type': 'application/json', 'Accept': 'application/json' }, data: { 'email': credentials.email, 'password': credentials.password } }).then(response => { console.log(response.data) router.push(redirect) }).catch(e => { console.log(e); }) } }

When I make the api request my javascript console shows

Failed to load resource: the server responded with a status of 500(Internal Server Error)

and my server console shows error

TypeError: Cannot read property 'username' of undefined

here username is username in basic authorization.

I'm new to Vue and am having some trouble with a few things. First, off I was following this tutorial: eventbus. If I put all the code (html, JS and CSS) in one html file, this works just as described in this tutorial.

However, I have been reading and I was following a VUE cli app structure. I used vue init webpack vueapp01 So, I have an index.html file in the vueapp01 root folder, in the src folder I have an app.vue and two vue files in the components folder; the-box.vue and the-button.vue; along with all the other files loaded by the vue template webpack.

Instead of having all the code in one html file (which works) I have the code separated out like this: index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vueapp01</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> App.vue:

<template> <div id="the-example" class="container"> <h1>Building an Event Bus with <a href="https://vuejs.org" target="_blank">Vue.js</a></h1> <div class="row"> <div class="col-xs-6"> <the-button what="Event #1"></the-button> <the-button what="Event #2"></the-button> <the-button what="Event #3"></the-button> </div> <div class="col-xs-6"> <the-box name="Receiver #1"></the-box> </div> </div> </div> </div> </template> <script> import the-button from './components/the-button' import the-box from './components/the-box' export default { name: 'app', components: { the-button,the-box } } </script> <-- <script> /****************************************** The Central Event Bus Instance *******************************************/ let EventBus = new Vue(); </script> the-box.vue:

/****************************************** Example Root Vue Instance *******************************************/ new Vue({el: "#the-example"}); /****************************************** A sample Vue.js component that emits an event *******************************************/ let TheButton = Vue.extend({ name: "the-button", props: ["what"], template: ` <button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button> `, methods: { makeItHappen: function(){ EventBus.$emit("somethingHappened", this.what) } } }); Vue.component("the-button", TheButton); the-button.vue:

/****************************************** A sample Vue.js component that received an event *******************************************/ let TheBox = Vue.extend({ name: "the-box", props: ["name"], template: ` <div class="well"> <div class="text-muted">{{name}}</div> <div>{{respondedText}}</div> </div> `, data: function(){ return { respondedText: null } }, created: function(){ EventBus.$on('somethingHappened', (what)=>{ this.respondedText = 'Event Received: ' + what; }) console.log("Responder") } }); Vue.component("the-box", TheBox);

Currently, I'm getting the errors, "unknown custom element the-box", "unknown custom element the-button". I've tried switching the script and template orders to have templates load first but I still have no luck.

Any help would be greatly appreciated. Also, I assume I'm doing this correctly by separating these components out to separate files but if that is incorrect I'd gladly take criticism on the way I'm learning to use Vue.

Lots of pieces, got them all working except one!

I can open a modal window, do a firebase image upload (with the correct call back to make sure the upload worked), save the image to firebase storage (using vuefire). And close the modal.

The image DOES NOT show up until I do a manual refresh, then displays fine. Also if the image has been cached, it works OK. Just can't figure out why I can't view the new image without that manual refresh.

CODE

HTML to Display image: edit.vue

<div> <img :src="showPhoto()" id="showPhoto" name="showPhoto" /> </div>

VUE code to populate html and open modal

showModal: function() { this.$modal.show('save') }, showPhoto: function () { const photoName = this.residentObj['photo'] console.log('photoName', photoName) if (photoName) { const gsReference = storage.refFromURL('gs://connect-the-dots-ef09c.appspot.com/images/' + this.$route.params.id + '/' + photoName).getDownloadURL().then(function(url) { var img = document.getElementById('showPhoto') img.src = url }) } }

Save uploaded image close modal, go back the parent page. I can push a new route, but that has no effect even though the image has changed.

save.vue

methods: { onFileChange(e) { const file = e.target.files[0]; const storageRef = firebase.storage().ref('images/' + this.$route.params.id + '/' + file.name); residentsRef.child(this.$route.params.id).update({photo:file.name}); storageRef.put(file).then(function(result) { alert("OK, file uploaded!") // this has no effect, and probably dont want to refresh the entire page this the "img src" // this.$router.push({name: 'edit', params: { id: this.$route.params.id }}); }}); this.closeModal () });

Summary: I can save an image to firebase using vue/vuefire, but can't view the new image unless I do a manual refresh. A cached image works fine.

Thanks for any tips.

I'd like to send Google oauth2 authentication from vue.js on my development machine. Here is the function:

authenticate: function (provider) { axios.get( this.BASE_URL + "/web/login" , { token: this.token, }).then(function(data){ console.log(data); }); }

But I get this error on Firefox instead:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/auth?client_id=something.apps.googleusercontent.com&... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I use go gin as backend and have set it to use CORS.

router.Use(cors.Middleware(cors.Config{ Origins: "*", Methods: "GET, PUT, POST, DELETE", RequestHeaders: "Origin, Authorization, Content-Type", ExposedHeaders: "", MaxAge: 86400, Credentials: true, ValidateHeaders: false, }))

So wondering who can I fix this error.