Axios Vue-resource using vue did not succeed across domains, but native xhr is fine.

  javascript, question

The cross-domain construction of axios vue-resource with VUE Ajax was unsuccessful.

But can native xhr succeed across domains?

Xhr request:
axios

Requests to use axios:
图片描述

Error tip (of axios):
图片描述

XMLHttpRequest cannot load  http://ss.net/  auth. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Or  igin 'http://vue.js:8080' is therefore not allowed access.
 
 createError.js?  f777:15 Uncaught (in promise) Error: Network Error
 at createError (eval at <anonymous> (build.js:899), <anonymous>:15:15)
 at XMLHttpRequest.handleError (eval at <anonymous> (build.js:878), <anonymous>:87:14)

code:

export default {
        data() {
            return {
                mes: '',
            }
        },
        methods: {
            logIn: function (mes) {
                //axios
                this.axios({
                    method: 'post',
                    url: 'http://ss.net/auth',
                    data: {
                        firstName: 'Fred',
                        lastName: 'Flintstone'
                    },
                    withCredentials: false
                });

                //xhr
                var request = new XMLHttpRequest();
                request.open('POST', 'http://ss.net/auth', true);

                request.onload = function() {
                    if (this.status >= 200 && this.status < 400) {

                    }
                };

                request.send();

            },
        },
    }

A middleware has been added to the back end, and the test should be no problem:

return $next($request)
 ->header('Access-Control-Allow-Origin', '*')
 ->header('Access-Control-Allow-Credentials', 'false')
 ->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS')
 ->header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');

The back-end has been set up with CROS. It’s been a whole day. Do you know anything about it ..

I just met a similar problem and have solved it. Try to answer your question.

First, the data axios sends the request is JSON format by default. This is the main reason for cross-domain errors with axios POST.

According to CORS standards, when a browser sends a cross-domain request, if the request is not a GET or a specific POST (the content-type can only be one of Application/X-WWW-Form-Urlencoded, Multipart/Form-Data or text/plain), It is strongly required that the browser must first send a preflight request in the form of OPTIONS request so as to know the HTTP method supported by the server for cross-source requests.

Therefore, using axios to send POST’s cross-domain request directly will report an error if there is a problem with the web backend’s response to OPTIONS. I don’t have a Node environment and I don’t know about Node, so I can’t verify whether your configuration is OK. However, referring to the configuration on my Nginx, I feel that if you add more content in Allow-Headers inside, it may be OK?

In addition, as to why XHR can. I guess it is also related to data format. XHR should be in form-urlencoded format. Because you can’t see Form Data in your screenshot, it’s not good to draw a conclusion.

Finally, I use axios to solve the cross-domain solution is similar to yours, but I first converted params to string format, see at the end.Official instructions in x-www-form-urlencoded format

import qs from 'qs';
 import axios from 'axios';
 
 let reqUrl = 'http://xxx.com';
 let reqParams = {
 name: 'aaa'
 };
 axios.post(url, qs.stringify({
 params: reqParams
 })).then(response => {
 console.log(response);
 })
#
 # Wide-open CORS config for nginx
 #
 location / {
 if ($request_method = 'OPTIONS') {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 #
 # Custom headers and headers various browsers *should* be OK with but aren't
 #
 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 #
 # Tell client that this pre-flight info is valid for 20 days
 #
 add_header 'Access-Control-Max-Age' 1728000;
 add_header 'Content-Type' 'text/plain charset=UTF-8';
 add_header 'Content-Length' 0;
 return 204;
 bracket
 if ($request_method = 'POST') {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 bracket
 if ($request_method = 'GET') {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 bracket
 bracket

Official instructions in x-www-form-urlencoded format

Explanation of CORS Standard