Appsmith不使用nginx代理

当本地启动appsimth调试,需要在启动一个docker、nginx才能访问后台,大大的增加的调试的难度。针对这个问题我们来对项目进行一下改造

Appsmith前端改造

打开前端项目找到Api.ts
可以看到baserUrl只有/api,在打开nginx.conf配置文件
在这里插入图片描述
我们发现是当前端访问/api的时候通过nginx转发到后台请求接口。
流程已经梳理明白接下来开始改造。

Appsmith改造

1、将baseUrl补全如下图所示
在这里插入图片描述
启动前端项目浏览器访问前端报错请求跨域。
在这里插入图片描述
打开server项目配置跨域设置

@Configuration
public class RouteConfig {

    private static final String ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
    private static final String ALLOWED_METHODS = "GET,POST,OPTIONS,PUT,DELETE"; // 不可以*号代替
    private static final String ALLOWED_Expose = "*";
    private static final String MAX_AGE = "18000L";

    @Bean
    @Order(-200) //保证filter在AuthFilter之前
    public WebFilter corsFilter() {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                String originHeader=request.getHeaders().getOrigin();
                ServerHttpResponse response = ctx.getResponse();
                HttpHeaders headers = response.getHeaders();
                headers.add("Access-Control-Allow-Origin", originHeader);
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
                headers.add("Access-Control-Max-Age", MAX_AGE);
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
                headers.add("Access-Control-Expose-Headers", ALLOWED_Expose);
                headers.add("Access-Control-Allow-Credentials", "true");
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }

重新启动后台项目,本地访问正常。

注意事项

登录、等其他接口也需要补全http://127.0.0.1:8080/,还有很多可以改造的地方以后在慢慢补充。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐