跨域请求

以下情况即为跨域(不同源）:
1、协议不同：http 和 https
2、域名不同： http://www.baidu.com 和 http://www.baidu2.com
3、域名前缀不同： http://www.baidu.com 和 http://ww.baidu.com
4、端口号不同： http://www.baidu.com:80(默认80可以不用写) 和 http://www.baidu.com:81

1、axios完成跨域
在vue.config.js中添加配置，详细见vue/cli3 官方文档配置文档

 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '^/api': {
        target: `http://localhost.com`, // 对应自己的接口
        changeOrigin: true, // 是否跨域
        ws: true, // 是否websockets跨域
        pathRewrite: {
          '^/api': '/'// 代理路径的代理名
        }
      }
    }
    // after: require('./mock/mock-server.js') 注释掉
  },

proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

2、使用vue-rousource完成

一、安装：

npm install vue-resource --save

二、main.js引入 vue-resource
···
import VueResource from 'vue-resource'
Vue.use(VueResource)
···

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
        params: {
          wd: 'axios'
        },
        jsonp: 'cb'
      }).then(function(res) {
        this.arr = res.data.s
      })