在React中POST之前禁用OPTIONS请求

我有一个基于Typescript的React应用程序，它托管在我的电脑上。我使用Spring网关将请求转发到另一个微服务。GET请求运行良好，但对于POST请求，我得到：

访问'XMLHttpRequesthttp://1.1.1.1:8080/api/support/tickets/create'来自原点'http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow Origin"标头。

我遇到了这个Spring Cloud Gateway问题：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

我尝试实现这个变通方法：

@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是一个浏览器功能，您可以在开发区域禁用它。

当这两个不匹配时，浏览器应该为非匹配的URL(网站URL和API URL(调用OPTIONS，浏览器必须为后端API调用OPTIONS才能继续，对于生产如果你的网站URL和API不匹配，你应该请后端或DevOps人员解决问题，但对于开发领域，你可以做几件事：

如果您正在使用CRA，前面的答案可以帮助您。
如果您正在使用自定义配置，并且您有一个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

有关最后一项的更多信息，您可以阅读这篇文章。

您的问题似乎只是关于本地开发。

createreact应用程序通过支持dev服务器作为API端点的代理来解决这一问题。

只需在package.json的proxy密钥中添加API域

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

Cors是一个浏览器功能，不能禁用。不过，当不使用POST方法时，你可以绕过飞行前，但如果没有正确的标题设置，你仍然无法访问响应体

相关内容

最新更新

热门标签：