Vue使用Axios库请求数据时跨域问题的解决方法详解

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

// 设置允许跨域请求的响应头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080')
  next()
})

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

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000')
})

.get('http://localhost:3000/api/data')
  .then(response => {
    console.log(response.data.message)
  })
  .catch(error => {
    console.error(error)
  })

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

npm install http-proxy-middleware --save-dev

const proxyMiddleware = require('http-proxy-middleware')

module.exports = {
  devServer: {
    before: function(app, server) {
      app.use('/api', proxyMiddleware({
        target: 'http://api.example.com',
        changeOrigin: true
      }))
    }
  }
}

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

import axios from 'axios';

axios.defaults.withCredentials = true; // 设置 withCredentials 选项为 true

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

axios.get('https://api.example.com/data', {
  withCredentials: true
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });