Vue3+Vite项目解决跨域问题 post请求方式变成options

在Vue3+Vite项目中，跨域问题通常是由浏览器的同源策略引起的。当前端向不同源的服务器发送请求时，如果不是简单请求，浏览器会首先发送一个OPTIONS预检请求，以确认实际请求是否安全可接受。

解决方法：

1. 后端CORS设置：

   在服务器端设置CORS（Cross-Origin Resource Sharing）策略，允许特定的源访问资源。例如，在Node.js的Express框架中，可以使用cors中间件来设置：

   
   
   
   const cors = require('cors');
   app.use(cors({
     origin: 'http://your-frontend-url.com', // 或使用函数来动态设置允许的源
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
     allowedHeaders: ['Content-Type', 'Authorization'],
   }));

2. 代理服务器：

   使用Vite代理功能，将API请求代理到API服务器，从而绕过跨域问题。在vite.config.js中配置代理：

   
   
   
   export default {
     // ...
     server: {
       proxy: {
         '/api': {
           target: 'http://api-server.com',
           changeOrigin: true,
           // 其他配置...
         }
       }
     }
   }

   然后在发送请求时，使用相对路径（如/api/endpoint），Vite将会自动代理请求。

3. 使用axios的代理配置：

   如果你使用axios作为HTTP客户端，可以在创建axios实例时配置代理：

   
   
   
   const axios = require('axios');
    
   const instance = axios.create({
     baseURL: '/api/', // 假设Vite代理到http://api-server.com
     // 其他配置...
   });

   在Vite代理配置中，changeOrigin设置为true时，请求头中的Host会被代理到目标服务器，这有助于解决跨域问题。

确保在实施以上任一解决方案时，遵循当地法律法规及最佳安全实践，不要在不了解风险的情况下开启过于宽松的CORS策略。