在Vue中使用Axios进行跨域请求时，通常会遇到浏览器的同源策略限制。同源策略是浏览器的一种安全策略，它要求执行在浏览器中的脚本只能从同一源请求HTTP资源。跨域请求（CORS，Cross-Origin Resource Sharing）是一种允许从另一个域名的资源进行交互的机制。

解决跨域的常见方法

1. CORS

   • 服务器设置Access-Control-Allow-Origin响应头允许特定的外部域访问资源。这是最直接的解决跨域问题的方法，但需要后端支持.

2. JSONP

   • JSONP是一种老旧的技术，通过<script>标签的src属性绕过同源策略。但它只支持GET请求，并且安全性较差.

3. 代理服务器

   • 在Vue开发环境中，可以配置一个代理服务器来转发请求。这是通过在vue.config.js中配置devServer.proxy实现的。代理服务器会接收前端的请求，然后转发到目标服务器，从而绕过浏览器的同源策略限制.

使用代理服务器的原理

当使用Vue CLI创建的项目中配置了代理服务器时，实际上是在本地启动了一个中间服务器。这个中间服务器会接收前端发出的请求，然后代理这个请求到实际的后端服务器上。因为这个请求是由本地服务器发出的，所以不受同源策略的限制。

例如，如果你的前端运行在http://127.0.0.1:8080，而后端API服务器运行在http://127.0.0.1:3000，直接从前端向后端发送请求会因为不满足同源策略而被浏览器阻止。但如果你配置了代理服务器，你可以在前端代码中向/demo发送请求，代理服务器会将请求转发到http://127.0.0.1:3000，并将响应返回给前端，从而绕过了跨域限制.

示例配置

在vue.config.js中配置代理服务器的示例代码如下：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/demo': {
        target: 'http://127.0.0.1:3000',
        pathRewrite: {'^/demo' : ''}
      }
    }
  }
};

在这个配置中，任何以/demo开头的请求都会被代理到http://127.0.0.1:3000，并且请求路径中的/demo会被删除，因此后端服务器会接收到不包含/demo的路径.

总结来说，Vue中Axios跨域的原理主要是通过服务器端设置CORS或者在客户端使用代理服务器来绕过浏览器的同源策略限制。在开发环境中，代理服务器是一种常用且有效的解决方案。