Vue uses axios to call API problem

the front-end vue calls the java API through axios, using springboot+jwt, to request with post. When there is a token, request in the headers, it will become options, and report 401. I looked for it on the Internet and said that it was a pre-check request. After the server judged the options, it was sent back successfully, but it still reported a cross-domain error and did not send the post request automatically. what is the reason for this?

it is normal to have a request without a custom headers.

clipboard.png


Cross-domain requests send option requests first
so the backend must be able to process option requests.
secondly, the server must also have a cross-domain header.
search for cross-domain processing solutions.


axios(url,toUrl(params)).then.....


function toUrl(obj) {
    if (obj && obj instanceof Object) {
        var arr = [];
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                if (Array.isArray(obj[i])) {
                    obj[i].forEach(function(v) {
                        arr.push(escape(i) + '=' + escape(v));
                    });
                } else {
                    if (typeof obj[i] == 'function') obj[i] = obj[i]();
                    if (obj[i] == null || obj[i] == undefined) obj[i] = '';
                    arr.push(escape(i) + '=' + escape(obj[i]));
                }
            }
        }
        return arr.join('&').replace(/%20/g, '+');
    } else {
        return obj;
    }
};

Cross-domain problems are caused by the browser's homologous policy, which is a security measure. Server resources are not allowed to be displayed on pages of different domains by default. So let the backend allow resources to cross-domain.
this problem can also be solved by using a proxy. There is a proxy service automatically in Vue development mode, which can be configured.


there is something called pre-request

Menu