axios 跨域配置

在使用 axios 进行跨域请求时，需要进行一些配置，以下是一个基本的跨域配置示例：

import axios from 'axios'

axios.defaults.baseURL = 'http://api.example.com'
axios.defaults.withCredentials = true
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response.status === 401) {
      // 处理未授权的情况
      console.log('Unauthorized')
    }
    return Promise.reject(error)
  }
)

其中，`baseURL` 是你要请求的域名，`withCredentials` 表示是否允许发送跨域 cookie，`headers` 中可以设置公共的请求头，例如上面的示例中设置了一个 Bearer Token。另外，`interceptors` 中可以对响应进行拦截处理，例如处理未授权的情况。

相关问题

axios跨域代理配置

可以尝试在配置文件中添加以下代码：

module.exports = {
  devServer: {
    // ...
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 实际要请求的服务器URL
        changeOrigin: true, // 允许跨域
        pathRewrite: { // 重写路径
          '^/api': ''
        }
      }
    }
  }
}

这样，在前端请求后端API时，只需要将请求的路径改为`/api`开头即可。比如请求`http://api.example.com/test`，可以写成`/api/test`，axios会将`/api`重写为实际请求的服务器URL，并加上`/test`，从而实现跨域请求。

vue配置axios跨域代理

要在 Vue 项目中配置 Axios 跨域代理，可以按照以下步骤进行操作：

1. 安装 Axios 和 http-proxy-middleware

npm install axios http-proxy-middleware --save

2. 在 `src` 目录下创建一个 `vue.config.js` 文件，并添加以下内容：

const proxyTable = {
  '/api': {
    target: 'http://localhost:3000', // 接口的域名和端口号
    changeOrigin: true, // 跨域访问设置，true代表跨域
    pathRewrite: {
      '^/api': '/' // 重写路径
    }
  }
}

module.exports = {
  devServer: {
    // 配置多个代理
    proxy: proxyTable
  }
}

3. 在需要使用 Axios 的组件中引入并使用

import axios from 'axios'

axios.get('/api/data').then((res) => {
  console.log(res)
})

在这个例子中，我们使用了一个名为 `/api` 的代理，将所有以 `/api` 开头的请求都代理到 `http://localhost:3000`。

希望这个回答对你有所帮助！