vue3设置跨域devServer

Vue CLI 3提供了一种简单的方法来设置跨域请求。您可以通过编辑项目根目录下vue.config.js文件来配置devServer选项。在devServer选项中，您可以使用proxy字段来设置代理。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 设置代理目标地址
        changeOrigin: true, // 是否改变请求源地址
        pathRewrite: {
          '^/api': '' // 重写请求路径，可选配置
        }
      }
    }
  }
}

上述配置中，我们将以/api开头的请求代理到http://api.example.com。changeOrigin选项设置为true表示将请求源地址更改为代理目标地址。如果需要重写请求路径，可以使用pathRewrite选项。

请注意，以上配置只在开发环境中生效，正式环境需要采用其他方法来处理跨域，比如后端设置可以跨域、Nginx反向代理或前端使用JSONP处理跨域。

相关问题

vue中怎么在devserver中解决跨域问题

可以通过配置webpack.dev.conf.js文件来解决vue中的跨域问题，具体方法如下：

1. 在config目录下新建一个文件proxyTable.js，用来配置跨域代理。

2. 在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加proxyTable.js中的代理设置。

例如，你的后端服务地址是http://localhost:8080，而你的前端开发地址是http://localhost:8081，那么你可以在proxyTable.js文件中配置如下的代理：

module.exports = {

"/api": {

target: "http://localhost:8080",

changeOrigin: true,

pathRewrite: {

"^/api": ""

}

}

}

在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加上面的代理设置：

const proxyTable = require('./proxyTable')

devServer: {

proxy: proxyTable

}

这样，当你在前端访问/api/foo时，代理会将请求转发到http://localhost:8080/foo。这样就能解决vue中devserver的跨域问题了。

vue3axios跨域

axios是一个常用的前端HTTP请求库，用于发送请求和处理响应。在Vue 3.x中使用axios进行跨域请求的方法如下：

首先，在vue.config.js中配置webpack，具体配置如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 跨域的目标地址
        changeOrigin: true, // 是否改变源地址
        pathRewrite: {
          '^/api': '' // 将请求路径中的'/api'替换为空
        }
      }
    }
  }
}

接下来，在main.js中引入axios并设置默认请求地址：

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$http = axios
axios.defaults.baseURL = '/api'

app.mount('#app')

然后，就可以在组件中使用axios发送请求了：

this.$http.post('user/getInfo').then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})