vue实现跨域的方法分析

下面是“vue实现跨域的方法分析”的完整攻略：

1. 什么是跨域

跨域是指在浏览器端，当前页面的域名与所访问的服务器域名不一致时产生的安全限制。例如，在一个网站的前端代码中，我们不能直接访问另一个域名的接口，否则会产生跨域问题。

2. Vue实现跨域的方法

在Vue中，我们可以通过配置代理实现跨域访问，一般有两种方式：

方式1：在vue.config.js文件中进行代理配置

在vue项目的根目录（即package.json所在目录）下，新建一个vue.config.js文件，并将以下代码复制到该文件中：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 接口的域名
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api': '/'   // 需要rewrite重写的,
        }
      }
    }
  }
}

以上代码的含义是：将请求路径为/api的请求转发到本地的http://localhost:3000服务器上，并将访问路径中的/api重写为/。

方式2：在组件中进行代理配置

如果只有少量跨域的请求，我们也可以不在vue.config.js文件中配置代理，而是在组件中通过axios进行代理。

以下是一个示例代码：

import axios from 'axios'

axios.defaults.baseURL = '/api/'

export function getList() {
  return axios.get('/list')
}

在上述示例中，我们将axios.defaults.baseURL设置为/api/，即所有发往服务器的请求都会被代理到以/api/为开头的路径中。这样，在调用getList函数时，实际请求的URL为http://localhost:8080/api/list。

3. 总结

本篇攻略介绍了Vue实现跨域的两种方法，其中方式1是在vue.config.js文件中进行代理配置，方式2是在组件中通过axios进行代理。在实际开发中，我们可以根据具体的需求选择合适的方式。