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/,还有很多可以改造的地方以后在慢慢补充。