使用启用了 no-cors 的 Fetch api DELETE 方法答案

【问题标题】：Using Fetch api DELETE method with no-cors enabled使用启用了 no-cors 的 Fetch api DELETE 方法
【发布时间】：2021-08-18 19:23:28
【问题描述】：

我正在尝试发出删除后端实体的 API 请求。我的 spring 服务器和 node.js 服务器运行在不同的端口上。

当我尝试启用 cors 的获取请求 (mode: "cors") 时，我收到一条错误消息，指出该请求已被 cors 策略阻止。当我禁用 cors (mode: "no-cors") 时，我收到以下错误：

 Failed to execute 'fetch' on 'Window': 'DELETE' is unsupported in no-cors mode.

请求代码：

export async function deleteOneProcessType(id) {
let ret = await fetch(`${restUri}${uri}/${id}`, {
    method: "DELETE",
    mode: "no-cors"
})

}

我有类似的 POST 和 GET 方法，但禁用了 cors，效果很好。

【问题讨论】：

cors 策略错误意味着您需要启用它。删除您的“模式：no-cors”并在您的后端启用 cors 请求。添加 'mode: cors' 并没有做很多改变它在你的 abckend 中没有启用
是的，我知道。我已经在我的后端启用了 cors 请求。我已经有几个 POST 请求可以正常工作。它们与我在问题中提到的删除请求完全相同，但它们不是 DELETE，而是 POST。问题似乎是 DELETE 方法与 POST 方法的工作方式不同，但我一直无法找到解决方案
您的后端是否在 Azure 上运行？如果是这样，您必须确保您的 javascript 前端经过 ssl 认证 (https)

标签： javascript reactjs cors fetch fetch-api

【解决方案1】：

POST 和 GET 被视为 simple requests ，您可以在其中使用 mode: "no-cors" 。例如，您不能使用 DELETE 和 PUT 执行此操作。我建议您对所有 API 调用使用 Proxy server。使用代理服务器可以解决 CORS 错误。

例子：你想删除一个实体到这个api：https://test.api.com/customer/1。

在 package.json 中添加以下行：

"proxy": "https://test.api.com"

您在组件中的请求：

export async function deleteOneProcessType(id) {
let ret = await fetch(`/customer/${id}`, {
    method: "DELETE"
})

【讨论】：

【解决方案2】：

无需设置mode: "no-cors" 事实上，您只需要调整您的后端以允许您的请求

为此添加一个 WebMvcConfigurer Bean

例如，您可以使用配置类来执行此操作。可以参考https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

正如文档中提到的，默认情况下只允许 GET 和 POST 请求。那么你也需要允许删除

最后你应该有类似的东西：

@Bean
public WebMvcConfigurer corsController()
{
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("[Your_backend_server_URI_here]/**")
                    .allowedOrigins("[Your_frontend_URL_here]")
                    .allowedMethods("PUT","DELETE","GET","POST");
        }
    };
}

【讨论】：