axios实现跨域的两种方式及代码

axios实现跨域的两种方式及代码

在使用 Axios 发起跨域请求时，可以通过以下两种方式来解决：

1.服务端配置 CORS（跨域资源共享）

需要在服务器端设置响应头，允许指定的域名或者所有域名访问该接口。

示例 Node.js 代码：

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors()) // 允许所有域名访问

app.get('/api/data', (req, res) => {
  res.json({
    message: 'Hello World!'
  })
})

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})

2、在前端配置代理

在开发环境中，可以通过配置代理将请求发送到本地的服务器，从而避免跨域问题。

示例 Vue.js 配置：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理目标地址
        changeOrigin: true, // 开启代理服务器
        pathRewrite: {
          '^/api': '' // 重写请求地址，去掉 '/api' 前缀
        }
      }
    }
  }
}

在 Axios 中发送请求时，只需要将请求地址改为代理服务器的地址即可。

示例 Axios 代码：

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

以上是两种常用的跨域解决方案，具体的实现方式还需要根据项目的实际情况来选择。