Accessing data across domains using the Vue-cli+axios configuration agent

Because only the get and post methods can be used in Axios to make request data cross-domain Access data without JSONP and so on if you want to use Axios to do cross-domain access directly it is not possible to configure the agent why do I need to configure the agent? The reason is because the client is requesting that the data on the server has cross-domain problems and that the servers and servers can request data from each other is not a cross-domain concept if the server is not set prohibit Cross-domain permissions problems that is, we can configure a proxy server to request data from another server and then return the requested data to our proxy service Proxy server to return data to our clients so that we can achieve cross-domain access to data if you do not understand can see the basis of the following figure to understand this principle we can follow this logic to configure the 1 first in the local global installation VUE-CLI 2 initialization Project Axios-cross project name 3 Install dependent file 4 in the Axios-cross Project install Axios 5 in the Axios-cross project install Http-proxy-middleware Middleware as Agent 6 in the Axios-cross project Axios-cross Found in the project Srcmainjs introduced Axios 7 to http-proxy-middleware this middleware for local proxy configuration found in Axios-cross Project CONFIGINDEXJS 8 in Axios-cross The Srccomponentshelloworldvue code to find the project is modified as follows 9 because Webpack-dev-server is not set--open in the new version of Vue-cli Packagejson, the Packagejson file is manually added scripts the dev attribute in the--open attribute as shown in the following code 10 in the CMD console, enter the NPM run Dev Start service effect chart as follows

because only the get and post methods are used in Axios to request data, there is no way to provide cross-domain access to data JSONP, etc.

Axios Chinese Website: https://www.kancloud.cn/yunye/axios/234845

Get request
axios.get ('/user ', {
    params: {
      id:12345
    }
  }) in Axios
  . Then (function (response) {
    Console.log (response);
  })
  . catch (function (error) {
    console.log (error);
  });

Post request in Axios
axios.post ('/user ', {
    firstName: ' Fred ',
    lastName: ' Flintstone '
  })
  . Then (function (response) {
    Console.log (response);
  })
  . catch (function (error) {
    console.log (error);
  });

If you want to use Axios direct cross-domain access is not possible, this is the need to configure the agent, why to configure the agent. The reason is that because the client requests server-side data for cross-domain problems, and servers and servers can request data from one another, there is no cross-domain concept (if the server does not set permissions issues that prohibit Cross-domain permission), that is to say, We can configure a proxy server to request data from another server, and then return the requested data to our proxy server, and the proxy server returns the data to our clients so that we can access the data across the domain . If you do not understand, you can look at the following picture

having understood this principle, we can then configure it according to this logic.

steps: 1, first in the local global installation VUE-CLI

Vue-cli URL: https://github.com/vuejs/vue-cli

NPM install-g vue-cli 2, initialization project (AXIOS-CROSS project name)

Vue Init webpack axios-cross 3, installing dependent files in Axios-cross project

NPM Install 4, installing Axios in the Axios-cross project

NPM Install axios-d

-D equivalent to--save-dev

-S is equivalent to--save 5, installing Http-proxy-middleware middleware as an agent in the Axios-cross project

NPM install-s Http-proxy-middleware 6, introduced Axios in the Axios-cross project's find Src/main.js

The Vue build version to load and the ' Import ' command
//(runtime-only or standalone) has been set in Webpack.bas E.conf with an alias.
Import Vue from ' Vue '
to ' import App from './app '
import router from './router '
import axios from ' Axios '//1, here Introduction of Axios

vue.prototype. $axios = Axios;   2. Use Axios

Vue.config.productionTip = false/

* eslint-disable no-new
/New Vue ({
  el: ' #app ' in Vue) C11/>router,
  Template: ' <App/> ',
  components: {App}
})

7, for Http-proxy-middleware this middleware for local proxy configuration, in the Axios-cross project to find Config/index.js

' Use strict '
//Template version:1.2.6
//* http://vuejs-templates.github.io/webpack for documentation.

Const PATH = require (' path ')

module.exports = {
  Dev: {

    //Paths
    assetssubdirectory: ' Static ',
    Assetspublicpath: '/',
    proxytable: {//Here Configure the following code
        '/api ': {
            target: ' Http://api.jisuapi.com/XXXXX ',// The third party interface you requested
            changeorigin:true,//local will create a virtual server, and then send the requested data, and also receive the requested data, so that the server and server to interact with the data will not have cross-domain problem
            pathrewrite:{  //path rewrite,
                ' ^/api ': '/api '  //Replace the request address in target, which means that you are requesting http://api.jisuapi.com/ XXXXX this address when directly written/api can be. }}
    ,

  //The following code omitted ...

8, in the Axios-cross project to find Src/components/helloworld.vue, code changes as follows

<template> <div class= "Hello" >  
9, because in the new version of the VUE-CLI Package.json webpack-dev-server not set--open, so open the Package.json file in the "scripts" attribute "Dev" property, as shown in the following code, by manually adding--open to the 
"Scripts": {
    "dev": "Webpack-dev-server--open--inline--progress--config", "
    Start ": npm Run Dev",
    "unit": "Jest--config test/unit/jest.conf.js--coverage",
    "e2e": "Node test/e2e/ Runner.js ",
    " test ":" NPM run unit && npm run e2e ",
    " lint ":" Eslint--ext. Js,.vue src test/unit/specs Test /e2e/specs ", Build
    ": "Node Build/build.js"
  },
 
10, in the CMD console input npm run dev start service. The effect chart is as follows: 

This allows us to request data across domains using Axios through a configured proxy.