停止从 axios.post 发送印前检查请求

Question

我使用弹簧启动和弹簧安全性开发了我的微服务，前端是在反应钩子上设计的。 现在，当我使用 axios.post 方法向我的微服务发送一些数据时，它会发送 CORS 预检方法，即选项方法，因为 axios 默认将内容类型作为应用程序/json 发送，而 application.json 导致在任何其他请求之前将选项请求发送到服务器。

我尝试使用不同的标头和内容类型发送我的请求，如"application/x-www-form-urlencoded"，我也在我的服务器端使用了 @cross-origin(*)。

const config = {
headers: {
'Content-Type': 'application/json'
}
}
const response = await axios.post(ps.user_ms_url+ps.user_login,
{
username:values.email,
password:values.password
// headers:{'tokenvalue':'token'}
},
config);

我希望我的浏览器只向服务器发送 post 请求，为此我也准备好更改我的标头。 任何帮助将不胜感激。提前感谢！

Answer 1

我找到了查询的解决方案。正如我上面提到的，如果我们的请求不简单(这里简单的意思是：如果请求包含内容类型：application/json或自定义标头等)，并且如果我们将此请求发送到其他域/URL，我们的浏览器会在任何其他请求之前发送预检请求(意味着选项请求)。

默认情况下，我们的 axios.post 方法将内容类型作为应用程序/json 携带，这就是为什么我的浏览器发送多个请求(意味着在任何其他请求之前进行预检请求)。

现在，我已将数据作为参数发送，将请求内容类型更改为应用程序/x-www-form-urlencode，如下所示：

var params = new URLSearchParams();
params.append('username', values.email);
params.append('password', values.password);
const response = await axios.post(ps.user_ms_url+ps.user_login,
params);

并使用@ModelAttribute注释(Spring-boot)在后端处理此请求。因此，保持请求简单可以停止预检请求。

Answer 2

您可以通过代理请求来避免 CORS 预检请求。将其添加到您的 webpack 开发配置中

devServer: {
port: process.env.PORT || 3000,
proxy: {
'/api': {
target: 'http:localhost:8080',
pathRewrite: { '^/api': '' },
changeOrigin: true,
},
},
}

这意味着您对/api/users的请求将转发给http://localhost:8080/users。

如果您使用的是create-react-app.，只需将"proxy": "http://localhost:8080"添加到package.json中即可。在此处查看更多信息

Answer 3

这似乎是服务器端 CORS 问题。您必须通过提供正确的响应标头来允许域访问资源。

您可以查看在春季启动中添加 CORS 标头。请参阅此链接

希望有帮助!!