vue-cli3.0 axios跨域请求代理配置

*** 假设后端的请求地址: http://127.0.0.1:3000/admin/api

1.为什么会出现CORS错误？

浏览器保护Web应用程序仅与来自同一来源的应用程序进行交互。这是一个称为same-origin的策略。但是有时需要将请求发送到另一台服务器。CORS或跨域资源共享是一种通过为请求设置特定的标头来实现跨域请求的标准。
就我而言,我正在使用Vue CLI serve命令为Vue应用程序提供服务，localhost:8080而后端项目则是通过apache在虚拟主机上运行的；完全违反原产地政策。如果可以通过某种方式将Ajax请求发送到相同的来源，则问题已解决。我们可以通过服务器配置来实现此行为的不同方法。由于我们是前端开发人员，并且服务器配置在生产中可能会有所不同，因此我们需要一些仅在开发期间应用并且可以在前端处理的解决方案。

2.在根目录下创建vue.config.js

在内部，module.export您可以使用devServer对象为开发服务器添加配置。现在，我们要配置我们的开发服务器以将API请求代理到后端域。

module.exports = {
  publicPath: './',
  devServer: {
    // 设置代理
    proxy: 'http://127.0.0.1:3000' // 该proxy属性是后端主机的地址,可域名也可https
  }
}

这将告诉开发服务器将任何未知请求（与静态文件不匹配的请求）代理到http://127.0.0.1:3000

3.在axios的配置文件中

// 创建插件对象
const service = axios.create({
  baseURL: '/admin/api/'
})