在 React 中 POST 之前禁用 OPTIONS 请求

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

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

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

弹簧云配置：

@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 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 是一个浏览器功能，您可以在发展 area.

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

• 如果您使用 CRA，之前的回答 https://stackoverflow.com/a/70921988/6877799可以帮你。

• 如果您使用自定义配置并且有 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
  

有关最后一项的更多信息，您可以阅读这个帖子 https://stackoverflow.com/q/3102819/6877799.