Question

我已经使用spring-boot和spring安全性开发了我的微服务，并且前端是根据react-hook设计的。现在，当我使用axios.post方法向我的微服务发送一些数据时，它会发送CORS预检方法，即options方法，因为axios默认情况下将content-type发送为application / 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);

我希望我的浏览器仅将发布请求发送到服务器，因此我也准备更改标头。任何帮助将不胜感激。预先感谢！

Answer 1

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

您可以查看在春季引导中添加CORS标头。请参阅此link

希望有帮助！

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中即可。查看更多信息here

Answer 3

我找到了查询的解决方案。如前所述，如果我们的请求不简单（此处简单的意思是：如果请求包含content-type：application / json或自定义标头等），并且我们正在发送，则我们的浏览器会在其他任何请求之前发送预检请求（即选项请求）将此请求发送到其他域/ URL。

默认情况下，我们的axios.post方法将content-type携带为application / json，这就是为什么我的浏览器正在发送多个请求（意味着预检请求先于其他任何请求）。

现在，通过将数据作为参数发送，我将请求的内容类型更改为application / x-www-form-urlencoded，如下所示：

     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）在后端处理此请求。因此，保持简单的请求可以停止预检请求。

停止从axios.post发送预检请求

3 个答案: