vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解

在Vue + Vite项目中，解决跨域问题通常有两种方式：通过代理配置和使用CORS。

1. 代理配置方式：

   在Vite项目中，可以在vite.config.js文件中配置代理规则，将API请求代理到目标服务器，从而绕过浏览器的同源策略。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
      }
    }
  }
})

在上述配置中，当请求以/api开头时，Vite会将请求代理到http://backend.example.com，并且通过changeOrigin选项使得代理服务器把请求伪装成从原始域名发起的。

2. CORS方式：

   CORS（Cross-Origin Resource Sharing）跨源资源共享，需要服务器设置响应头Access-Control-Allow-Origin允许特定的域进行访问。

如果你控制服务器代码，可以在服务器端设置CORS响应头，例如在Node.js的Express应用中：

// server.js
const express = require('express');
const app = express();
 
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // 或者指定特定的域名
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
 
app.get('/api/data', function(req, res) {
  res.json({ data: 'some data' });
});
 
app.listen(3000, function() {
  console.log('CORS-enabled web server listening on port 3000');
});

在上述代码中，服务器通过设置Access-Control-Allow-Origin响应头为*（或特定的域），允许所有源访问资源。

以上两种方式是跨域问题的常见解决方案，开发者可以根据实际情况选择合适的方法。通过代理的方式对前端更加友好，不需要后端配合修改，但CORS方式对前端不那么友好，需要后端支持。