vue3 vite 跨域

• 安装 Vite

npm install vite --save-dev
 

• 配置 Vite 开发服务器代理

在项目根目录下创建或编辑 vite.config.js 文件，添加代理配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 代理所有 /api 开头的请求到目标服务器
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
 

在这个配置中：

• target 指定了代理请求的目标服务器。
• changeOrigin 设置为 true 以便修改请求头中的 Host 字段，使其与目标服务器匹配。
• rewrite 用于重写请求路径，比如将 /api 前缀移除。

• 使用代理进行请求

在你的 Vue 组件或其他前端代码中，通过 /api 进行请求，Vite 开发服务器会自动将请求代理到目标服务器。

例如，使用 axios 发起请求：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          console.log('Data:', response.data);
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
};
</script>
 

• 确保后端服务器支持 CORS

即使在开发环境中使用代理解决了跨域问题，在生产环境中部署时，后端服务器仍需支持 CORS。确保服务器的响应头包含适当的 CORS 配置。例如，在 Node.js 和 Express 中可以这样配置：

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

app.use(cors());

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

app.listen(3000, () => {
  console.log('Server running on port 3000');
});