vue 2.x(vue/cli)中解决跨域的基本配置（demo）

1.在vue.config.js中配置如下代码

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        target: 'https://www.vue-js.com/api',

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

}

 

2.修改api中的域名

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png">

    <button @click="handleClick">跨域请求测试</button>

  </div>

</template>

<script>

import axios from 'axios'

export default {

  name: 'App',

  methods: {

    handleClick () {

      axios.get('api/v1/topics').then(res => {

        console.log(res);

      })

    }

  }

}

</script>

<style lang="less">

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>