在 React 中 POST 之前禁用 OPTIONS 请求答案

【问题标题】：Disable OPTIONS request before POST in React在 React 中 POST 之前禁用 OPTIONS 请求
【发布时间】：2022-01-09 01:32:41
【问题描述】：

我有一个基于 Typescript 的 React 应用程序，它托管在我的 PC 上。我使用 Spring 网关将请求转发到另一个微服务。 GET 请求工作正常，但对于 POST 请求，我得到：

CORS 策略已阻止从源“http://localhost:3000”访问“http://1.1.1.1:8080/api/support/tickets/create”处的 XMLHttpRequest：对预检请求的响应没有“ t 通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我遇到了这个 Spring Cloud Gateway 问题：https://github.com/spring-cloud/spring-cloud-gateway/issues/229

Spring 云配置：

@Bean
public RouteLocator routes(RouteLocatorBuilder builder, LoggingGatewayFilterFactory loggingFactory) {
    return builder.routes()
            .route("route_id",
                    route -> route
                            .path("/api/support/tickets/**")
                            .filters(f -> f.rewritePath("/api/support/tickets/(?<RID>.*)", "/support/tickets/${RID}"))
                            .uri("lb://merchant-hub-admin-service")
            )
            .build();
}

反应代码：

export async function getTicket(id: string) {
  return await axios.get(`${baseUrl}/support/tickets/ticket/${id}`);
}

export async function postTicket(
  data: TicketFullDTO
): Promise<AxiosResponse<TicketFullDTO>> {
  return await axios.post<TicketFullDTO>(
    `${baseUrl}/support/tickets/create`, data);
}

这是由于买入Spring Cloud Gateway引起的：https://github.com/spring-cloud/spring-cloud-gateway/issues/2472

我尝试实施此解决方法：

@Bean
public RoutePredicateHandlerMapping tusRoutePredicateHandlerMapping(FilteringWebHandler webHandler,
                                                                    RouteLocator routeLocator,
                                                                    GlobalCorsProperties globalCorsProperties,
                                                                    Environment environment) {
    RoutePredicateHandlerMapping routePredicateHandlerMapping = new RoutePredicateHandlerMapping(webHandler,
            routeLocator, globalCorsProperties, environment);
    routePredicateHandlerMapping.setCorsProcessor(new CrackCorsProcessor());
    return routePredicateHandlerMapping;
}

import org.springframework.lang.Nullable;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.DefaultCorsProcessor;
import org.springframework.web.server.ServerWebExchange;

public class CrackCorsProcessor extends DefaultCorsProcessor {
    @Override
    public boolean process(@Nullable CorsConfiguration config, ServerWebExchange exchange) {
        return false;
    }
}

但它不起作用。你知道我该如何解决这个问题吗？

【问题讨论】：

您是否为 CORS 配置了网关？从 Github 链接看来，有一些解决方法可以设置允许的方法。
是的，我试过了，但没有解决问题。
postman 或类似内容在发布请求中显示哪些响应标头？
看这张图：ibb.co/gmQBYvW
我...可能是我失明了，但我没有看到任何Access-Control-Allow-Origin 标头...

标签： javascript reactjs spring-boot axios spring-cloud-gateway

【解决方案1】：

其实CORS是一个浏览器功能，你可以在开发区禁用它。

当这两个不匹配时，浏览器应该为不匹配的 URL（网站 URL 和 API URL）调用 OPTIONS，浏览器必须调用后端 API 的 OPTIONS 调用才能继续，用于生产 如果您的网站 URL 和 API 不匹配，您应该让您的后端或 DevOps 人员解决它，但对于开发领域，您可以做一些事情：

如果您使用 CRA，previous answer 可以为您提供帮助。
如果您使用自定义配置并且您有一个 Webpack 配置文件，请将此行添加到您的 Webpack 中，它可以帮助您：
```
module.exports = {
  devServer: {
    proxy: 'http://1.1.1.1:8080',
  },
```

另一种可爱的方法是直接禁用 Chrome 中的安全性以便于开发，将这些命令放入其相关的操作系统并运行，您将运行一个没有安全性的新 chrome 实例（无需 OPTIONS 调用）：

## macOS
open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

## windows
chrome.exe --disable-web-security

## linux
google-chrome --disable-web-security

有关最后一项的更多信息，您可以阅读this post。

【讨论】：

【解决方案2】：

您的问题似乎仅与本地开发有关。

Create react 应用通过支持开发服务器作为 API 端点的代理来解决这个问题。

只需在 package.json 的 proxy 键中添加 API 域即可。更多关于这个here

对于生产，您应该将它们都托管在同一个域下（使用反向代理来路由静态内容与基于 URL 路径的 api 请求），或者在您的后端找到一个永久的 cors 友好解决方案。

Cors 是一项浏览器功能，无法禁用。虽然，当不使用 POST 方法时，您可以绕过预检，但如果没有设置正确的标头，您仍然无法访问响应正文

【讨论】：