Access to XMLHttpRequest at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS policy:

Access to XMLHttpRequest at 'http://xxx' from origin 'http://xxx'has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现这个问题是axios的跨域问题。

既然不能直接访问，那么我们就可以设置代理。服务器之间请求数据，是没有跨域的。就可以配置一个代理服务器请求另一个服务器中的数据，然后把请求出来的数据返回到代理服务器中，代理服务器再返回数据给客户端，这样就可以实现跨域访问数据了。

具体内容如下：

用vue-cli3创建的项目没有vue.config.js文件，需要手动创建。

在根目录下，创建效果如图：

 在vue.config.js里面添加proxy来设置代理

module.exports = {
    devServer: {
      open: false,
      port: 8080,
      // 代理
      proxy: {
        '/': {
          target: 'http://localhost:8082',
          changeOrigin: true
        }
      }
    }
  }

然后在main.js中添加（baseURL也可以进行路径的配置，这里笔者采用空白，是想直接访问，不需要子文件夹，按个人需求）

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = ''

在使用axios的地方需要修改url(实际访问后台的接口为：http://localhost:8082/queryPerAll，我们在axios就可以把代理配置的内容省略，只需要写后面的路径就可以了)

          axios.get('/queryPerAll',{
          }).then(response=>{
            this.tableData = response.data
            console.log(response.data)
            })