L
L
levchak09102018-03-28 22:44:23
Vue.js
levchak0910, 2018-03-28 22:44:23

Why is it sending OPTIONS even though I'm doing a POST request?

I'm trying to send a POST request, but OPTIONS is coming to the server .
This only happens when an axios instance is used and called on the vuex store. If you use it in a component, then everything is ok.
If you use Axios directly, everything is fine too, but there is no baseURL. A trifle, but unpleasant.
Vue on port 8080, Node on port 3000.
main.js

import Vue from 'vue';
import Axios from 'axios';
import VueAxios from 'vue-axios';
const axios = Axios.create({baseURL: 'http://localhost:3000'});
Vue.use(VueAxios, axios);

import {store} from "./store/";

new Vue({
    ...
    store,
    ...
});

store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
    ...
    actions: {
        load({commit, getters}) {
            Vue.axios.post("/someurl", {
                data: "some data"
            });
        }
    }
});

5abbf07f619fd095150782.png
----------------------
He got confused and misled others.
It doesn’t work from the component, and the problem is not in the instance.
Maybe the problem is in CORS as RidgeA wrote , but I don’t understand why GET skips normally, but POST / PUT does not.
Code on github
---------------- ------
All the same, CORS
sent a request via fetch POST, the same thing happened, POST turned into OPTIONS.
I tried fetch with the parameter mode: "no-cors", it went, but the data still didn't transfer.
I collected the build and gave it through koa-static and everything worked as it should.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
R
RidgeA, 2018-03-28
@levchak0910

CORS

D
Dmitry Zotov, 2018-03-28
@modelair

this is how axios works and this is why you need to find out on the developer's github

P
pantagruel964, 2018-03-28
@pantagruel964

You yourself have answered your own question. Since the problem is with a new instance, then do not create it - use the existing one.

// app.js

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios.create({baseURL: 'http://localhost:3000'});

When calling a vuex action, we simply pass the vue instance
// Component.js

...
methods: {
    this.$store.dispatch('myAction', { self: this });
}
...

And we use
// store.js

export const actions = {
    myAction({commit}, {self}){
        self.$http.post('url', {
            data: []
        })
    }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question