Vue.js+axios and cross-domain

did not do web development, or use a day to learn vue.js, in order to cooperate with Golang to write some simple web programs.

Learning Vue.js

Vue.js's introduction does not write notes is really lazy to write, online a pile of articles directly search out to see good, at the same time can cooperate with Element-ui do some tests.
Originally saw the web front-end development is very annoying, a lot of messy things, the legend of the simple Vue is also motionless on a pile of what the family barrels, hands is the best way to learn, a little learning to feel vue is really very simple and convenient, of course, the real use should still be quite many pits.

Reference article:
Build Vscode+vue Environment
This may be the most complete analysis of vue-cli ...
Vue2 one of the family barrels: vue-cli (Vue Scaffolding) Ultra-detailed tutorial
Fast build based on VUE-CLI
And:
Vue Official documents
Vue CLI official Website documentation
Element UI Official Documentation

Photo Map (Click to view the original):

Vue.js

Installing and using Axios

$ cnpm install axios

main.js文件：import axios from 'axios'Vue.prototype.$axios = axios

This can be used this.$axios to invoke Axios, using examples to refer to the cross-domain below.

Cross-domain

1. Local server development environment, add proxytable Agent:

修改config/index.js文件：dev: {    // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    proxyTable: { //修改这里      '/bd': {        target: 'https://www.baidu.com',        secure: true, //https必须添加这个设置        changeOrigin: true,        pathRewrite: {          '^/bd': ''        }      }    },

You will need to restart the server after making the above modifications:npm run dev

Call
The call can be directly used '/BD ', will be automatically replaced with the target address defined above, the invocation example:

App.vue文件：methods: {    getBd (event) {      this.$axios.get('/bd')        .then(function (response) {          console.log(response)        })        .catch(function (error) {          console.log(error)        })    }  }

2. Production environment

Because in the development environment we generally directly use the npm run dev boot built-in server, and the above modification proxytable method should be to modify the local server's configuration to access the proxy address automatically add cross-domain functionality.

And the production environment is not, the server is generally another example of using Nginx, at this time to modify Nginx cross-domain configuration can be. Or Golang gin a server, add cross-domain support in your code. Or to access third-party Web sites, then directly using the back-end programming language such as go to cross-domain access, in fact, the cross-domain and the client has nothing to do with the server.

Production environment has not been tested, and so on after the verification and then add changes.