Project Local Environment API proxy settings and resolution Cross-domain using Vue-cli+axios

Problem Description:

The project created using VUE-CLI, the development address is localhost:8080, needs to access the interface on the localhost:8888.

Analysis Reason:

Access between different domain names requires Cross-domain to be properly requested. There are many ways to cross domains, usually requiring background configuration.
However, the project created by VUE-CLI can use the Node.js Proxy server directly to implement Cross-domain requests. Solution:

First, Axios does not support the use of Vue.use () method declarations,

the recommended way is to use the following declaration in Main.js

Import Axios from ' Axios ';

Vue.prototype. $http =axios;

In other Vue components, this. $http call to use the

1. When we build the project using VUE-CLI, we have the file that we set the Cross-domain request for.

2. During the development process, we can modify the dev:{} section in the index.js under the Item Config folder when Cross-domain cannot be requested.

Dev: {
        env:require ('./dev.env '),
        port:8888,
        autoopenbrowser:true,
        assetssubdirectory: ' Static ',
        assetspublicpath: '/',
        proxytable: {
            '/api ': {
                target: ' http://jsonplaceholder.com ',
                changeorigin:true,//allows Cross-domain
                pathrewrite:{  //needs to be rewrite rewritten, and if processing is done on the server side, do not have this
                    '/api ': '
                }
        },
        //CSS sourcemaps off by default because relative paths are ' buggy '
        //with ' option, according to T He css-loader
        the README//(HTTPS://GITHUB.COM/WEBPACK/CSS-LOADER#SOURCEMAPS)
        //In our experience, they Generally work as expected,
        //Just be aware to this issue when enabling this option.
        Csssourcemap:false
   }

Set Target to the domain name we need to access.

The above example/API/POSTS/1 the proxy request to ==> HTTP://JSONPLACEHOLDER.COM/POSTS/1.

If Pathrewrite: {
' ^/api ': ' API '
},
The proxy request is/API/POSTS/1 to ==> HTTP://JSONPLACEHOLDER.COM/API/POSTS/1.

3. Then configure the global request path in Main.js:

Vue.prototype.HOST = '/api '

4. So far, we can use this domain name in the global, as follows:

var url = this. HOST + '/posts/1 '.
$http. Get (URL). Then (res => {
   this.datalist = res.data.body;},res
 => {
   Console.info (' call failed ');
 };

Axios send get POST request issue

You typically set Content-type when you send a POST request.

The type of content sent, Application/json to send a JSON object but stringify it in advance.

Application/xxxx-form refers to sending. A=b&c=d format, you can use the QS method format,

QS installed Axios will automatically install, only need to import the components can be.

Const postdata=json.stringify (this.formcustomer);

' Content-type ': ' Application/json '}

const postdata=qs.stringify (this.formcustomer);//filtered into. &= format

' content-type ': ' Application/xxxx-form '}