vue跨域问题

// 在 Vue 项目中处理跨域问题，通常有几种常见的解决方案。以下是使用代理服务器的方式，这是最常用的方法之一。

// 解决方案：在开发环境中使用 webpack-dev-server 的代理功能

// 1. 修改 vue.config.js 文件（如果不存在则创建）
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标 API 服务器的地址
        changeOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径，将 /api 替换为空字符串
        }
      }
    }
  }
};

// 2. 在你的 Vue 组件或 API 请求文件中调用 API
// 使用 axios 发起请求
import axios from 'axios';

export function fetchData() {
  return axios.get('/api/data') // 这里的 /api 会被代理到目标服务器
    .then(response => response.data)
    .catch(error => console.error('Error fetching data:', error));
}

// 通过这种方式，所有的 /api 开头的请求都会被代理到 http://localhost:3000，并且浏览器不会认为这是跨域请求。

解释说明：

• 代理服务器：通过配置 vue.config.js 中的 devServer.proxy，可以将前端发送的请求代理到目标服务器。这样做的好处是避免了浏览器的同源策略限制，因为请求看起来像是发往同一个域名。
• pathRewrite：用于重写请求路径，例如 /api/data 会被重写为 /data，从而匹配目标服务器的 API 路径。
• changeOrigin：设置为 true 可以改变请求的源头，使目标服务器认为请求来自自身，从而解决跨域问题。