Vue3：聊聊如何解决跨域的问题

在Vue3中解决跨域问题可以通过以下几种方式：

• 代理请求：在vue.config.js中配置proxyTable，将请求代理到后台接口服务器。这样就可以通过同域名下的接口地址来访问后台接口。

• CORS跨域：在后台接口服务器中设置Access-Control-Allow-Origin等CORS相关的响应头，来允许跨域请求。

• JSONP：通过动态创建script标签，将请求发送到后台接口服务器，并在响应中返回一个回调函数的调用，从而实现跨域请求。

以上三种方式都可以实现Vue3中的跨域请求。具体使用哪种方式，需要根据具体情况来决定。

实例演示

以下是一个使用Vue3解决跨域问题的示例：

假设我们的Vue3项目中有一个组件需要从后台接口服务器获取数据，但是后台接口服务器与前端项目不在同一个域名下，因此需要解决跨域问题。

代理请求

在Vue3中，我们可以通过在vue.config.js中配置proxyTable来实现代理请求。假设我们的后台接口服务器地址是http://api.example.com，我们可以将请求代理到该地址。

首先，在Vue3项目的根目录下创建一个vue.config.js文件，内容如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true
      }
    }
  }
}

然后，在组件中发起请求时，将请求地址设置为代理地址即可：

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

这样就可以通过同域名下的接口地址来访问后台接口。

CORS跨域

在后台接口服务器中设置Access-Control-Allow-Origin等CORS相关的响应头，来允许跨域请求。假设我们的后台接口服务器使用Node.js开发，可以在响应中设置以下代码：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

这样就允许所有域名的请求访问该接口。

JSONP

通过动态创建script标签，将请求发送到后台接口服务器，并在响应中返回一个回调函数的调用，从而实现跨域请求。假设我们的后台接口服务器返回的数据是一个JSON对象，我们可以在组件中使用以下代码来获取数据：

let script = document.createElement('script')
script.src = 'http://api.example.com/data?callback=handleData'
document.body.appendChild(script)

function handleData(data) {
  console.log(data)
}

这样就可以通过JSONP方式获取后台接口服务器的数据。需要注意的是，在使用JSONP时，后台接口服务器需要支持返回JSONP格式的数据。