vue.config.js中配置跨域，有两种请求地址，怎么配置

您可以在vue.config.js文件中添加以下代码来配置跨域请求地址：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': ''
        }
      },
      '/api2': {
        target: 'http://localhost:4000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api2': ''
        }
      }
    }
  }
}

在上面的代码中，'/api1'和'/api2'表示你要进行跨域请求的路径，'http://localhost:3000/'和'http://localhost:4000/'分别表示你需要跨域访问的服务器地址。changeOrigin为true表示跨域请求时会处理跨域请求头，pathRewrite用于重写请求路径。

相关问题

vue.config.js 如何配置跨域

可以在 `vue.config.js` 中配置跨域的方法有两种：

1. 使用 `devServer.proxy` 选项。比如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your.api.server.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样，当请求的 URL 以 `/api` 开头时，请求会被代理到 `http://your.api.server.com`，并且带上跨域相关的 header。

2. 使用 `axios` 和 `CORS`（Cross-Origin Resource Sharing）。比如：

const axios = require('axios')

module.exports = {
  devServer: {
    before(app) {
      app.get('/api/*', (req, res) => {
        let url = 'http://your.api.server.com' + req.url.replace('/api', '')
        axios.get(url)
          .then(response => {
            res.json(response.data)
          })
          .catch(error => {
            res.json(error.response.data)
          })
      })
    }
  }
}

这样，所有以 `/api` 开头的请求都会被代理到 `http://your.api.server.com`，并且可以避免 CORS 问题。

在vue中配置跨域，发送请求

在Vue中配置跨域可以通过修改配置文件或者使用插件来实现。下面分别介绍两种方法：

1. 修改配置文件

在Vue的config文件夹下的index.js中，可以找到如下代码：

module.exports = {
  dev: {
    // ...
  },
  // ...
}

在其中添加如下代码：

module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000', // 接口的域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': '' // 将/api替换为''
        }
      }
    }
  },
  // ...
}

其中，proxyTable表示代理表；/api表示需要代理的接口路径；target表示接口的域名；changeOrigin表示是否跨域；pathRewrite表示路径重写。

然后在发送请求时，将接口路径改为/api/即可。

例如：

this.$http.get('/api/userinfo').then((response) => {
  console.log(response.data)
})

2. 使用插件

可以使用axios或者vue-resource等插件来发送跨域请求。以axios为例，可以在main.js中添加如下代码：

import axios from 'axios'
Vue.prototype.$http = axios.create({
  baseURL: 'http://localhost:3000', // 接口的域名
  timeout: 5000, // 请求超时时间
  withCredentials: true, // 允许携带cookie
  crossDomain: true // 允许跨域
})

然后在组件中使用：

this.$http.get('/userinfo').then((response) => {
  console.log(response.data)
})

其中，baseURL表示接口的域名；timeout表示请求超时时间；withCredentials和crossDomain表示允许携带cookie和允许跨域。