解决vue cli3使用axios跨域问题

下面我来详细讲解如何解决vue cli3使用axios跨域问题的完整攻略。

什么是跨域问题

在前后端分离的开发模式中，前端和后端往往不在同一个域名下，当我们在前端使用ajax或fetch等方法向后端发送请求时，如果请求的域名和当前页面的域名不同，就会遇到跨域问题。跨域问题是浏览器的一种安全措施，为了防止恶意网站伪造请求，限制了不同域名下的数据交换。

利用vue cli3配置代理解决跨域问题

vue cli3是基于webpack的，所以我们可以利用webpack提供的代理功能来解决跨域问题。我们只需在vue.config.js中添加一个proxy配置即可。

module.exports = {
  devServer: {
    proxy: {
      //配置跨域
      '/api': {
        target: 'http://localhost:3000/api/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里我们以向'http://localhost:3000/api/'发送请求为例。其中配置项解释如下：

• target：指向我们的后端服务地址。这里指向'http://localhost:3000/api/'。
• ws：是否启用websockets。
• changOrigin：是否启用跨域。
• pathRewrite：路径重写。我们将请求'/api'路径替换为后端接口的接口路径。

这样一来，在前端通过axios发送请求时，只需要在请求地址前加上代理的路径'/api'，就可以成功发送请求，并且不会遇到跨域问题。

利用axios的实例来处理跨域问题

除了通过代理解决跨域问题外，我们还可以使用axios的实例来处理跨域问题。通过创建axios实例，并在其实例中添加一些默认配置，我们可以统一管理跨域请求，避免在每个请求中都添加跨域配置。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000/api/',
  timeout: 5000,
  headers: {}
})

export default instance

这里我们创建了一个axios的实例instance，并设置了一些默认的配置：

• baseURL：指向我们的后端服务地址。这里指向'http://localhost:3000/api/'。
• timeout：超时时间，单位为毫秒，默认为0。
• headers：请求头配置。

接下来，我们在发送请求时就可以直接使用该实例，例如：

import axiosInstance from './axiosInstance'

export const getArticleList = () => {
  return axiosInstance({
    url: '/article/list',
    method: 'get'
  })
}

这样一来，在每个请求中都会默认加上baseURL，从而避免了跨域问题的发生。当然，如果在某个请求中不需要使用该实例的默认配置，我们可以覆盖掉该实例中的默认配置即可。

这就是利用axios的实例来处理跨域问题的方法。