Vue中解决axios POST请求触发OPTIONS预检请求的策略与技巧

无界猴

7个月前更新

045826

在Vue中使用axios发送POST请求时，有时会遇到浏览器自动发送一个OPTIONS请求（也称为“预检请求”）的问题。这通常发生在跨域请求（CORS）中，特别是当请求满足以下条件之一时：

图片[1]_Vue中解决axios POST请求触发OPTIONS预检请求的策略与技巧_知途无界

请求方法不是GET、HEAD或POST（但带有某些特定的请求头）。
POST请求的内容类型（Content-Type）不是application/x-www-form-urlencoded、multipart/form-data或text/plain。

预检请求是一个使用OPTIONS方法的HTTP请求，用于检查服务器是否允许实际请求的方法（如POST）和头信息。如果服务器配置正确并允许该请求，则实际请求（如POST）才会被发送。

解决方法

1. 确保后端支持CORS并允许预检请求

在你的后端服务器中，确保CORS策略已经正确配置，并且允许来自你的Vue应用的前端源的OPTIONS请求。这通常涉及到设置适当的响应头，如Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers。

例如，在Express中，你可以使用cors中间件来自动处理这些头信息：


const express = require('express');  
const cors = require('cors');  
  
const app = express();  
  
// 允许所有源和方法的CORS请求  
app.use(cors({  
  origin: true, // 允许任何源  
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',  
  preflightContinue: false, // 不发送OPTIONS响应体  
  optionsSuccessStatus: 204 // OPTIONS请求返回的状态码  
}));  
  
// 你的路由和中间件...  
  
app.listen(3000, () => {  
  console.log('Server is running on http://localhost:3000');  
});
const express = require('express');  
const cors = require('cors');  
  
const app = express();  
  
// 允许所有源和方法的CORS请求  
app.use(cors({  
  origin: true, // 允许任何源  
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',  
  preflightContinue: false, // 不发送OPTIONS响应体  
  optionsSuccessStatus: 204 // OPTIONS请求返回的状态码  
}));  
  
// 你的路由和中间件...  
  
app.listen(3000, () => {  
  console.log('Server is running on http://localhost:3000');  
});
const express = require('express');  
const cors = require('cors');  
  
const app = express();  
  
// 允许所有源和方法的CORS请求  
app.use(cors({  
  origin: true, // 允许任何源  
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',  
  preflightContinue: false, // 不发送OPTIONS响应体  
  optionsSuccessStatus: 204 // OPTIONS请求返回的状态码  
}));  
  
// 你的路由和中间件...  
  
app.listen(3000, () => {  
  console.log('Server is running on http://localhost:3000');  
});

注意：在生产环境中，你应该限制origin的值到特定的前端域名，而不是使用true来允许所有源。

2. 检查前端请求的配置

确保你的axios请求配置正确，特别是Content-Type头。如果你正在发送JSON数据，确保设置了正确的Content-Type: application/json。axios通常会自动为你设置这个头，但如果你手动更改了它，可能会导致问题。


axios.post('http://example.com/api/data', {  
  // 数据  
}, {  
  headers: {  
    'Content-Type': 'application/json' // 通常不需要手动设置，axios会为你做这件事  
  }  
})  
.then(response => {  
  console.log(response.data);  
})  
.catch(error => {  
  console.error(error);  
});
axios.post('http://example.com/api/data', {  
  // 数据  
}, {  
  headers: {  
    'Content-Type': 'application/json' // 通常不需要手动设置，axios会为你做这件事  
  }  
})  
.then(response => {  
  console.log(response.data);  
})  
.catch(error => {  
  console.error(error);  
});
axios.post('http://example.com/api/data', {  
  // 数据  
}, {  
  headers: {  
    'Content-Type': 'application/json' // 通常不需要手动设置，axios会为你做这件事  
  }  
})  
.then(response => {  
  console.log(response.data);  
})  
.catch(error => {  
  console.error(error);  
});

3. 使用浏览器的开发者工具

使用浏览器的开发者工具（如Chrome的DevTools）来查看网络请求和响应。检查OPTIONS请求的响应头，确保它们包含允许你的请求的方法和头的信息。

4. 代理配置

如果你正在开发环境中工作，并且已经配置了Vue CLI的代理设置，确保它们正确无误，并且代理到你的后端服务器。代理设置可以阻止浏览器执行CORS检查，因为它看起来像是同源的请求。


// vue.config.js  
module.exports = {  
  devServer: {  
    proxy: 'http://localhost:3000', // 你的后端服务器地址  
  },  
};
// vue.config.js  
module.exports = {  
  devServer: {  
    proxy: 'http://localhost:3000', // 你的后端服务器地址  
  },  
};
// vue.config.js  
module.exports = {  
  devServer: {  
    proxy: 'http://localhost:3000', // 你的后端服务器地址  
  },  
};