извините за длинный пост заранее, но я не такой эксперт (особенно в области фронт-энда) и постараюсь предоставить как можно больше информации. Через пару дней я столкнулся с проблемой после развертывания моего веб-приложения на рабочем сервере.
Интерфейс - это приложение Angular 8 (развернуто на IIS), которое использует API-интерфейсы REST, предоставляемые приложением Spring Boot. развернут на Apache Tomcat 8.5.47 (установлен на том же рабочем сервере).
При использовании любого браузера от I go до www.mywebsite.com (просто в качестве примера, чтобы указать, что это мой зарегистрированный домен webapp) с самого сервера, у меня вообще нет проблем, и все работает правильно.
Проблема возникает, когда я использую другой компьютер, а не сервер. В этом случае я вижу домашнюю страницу на www.mywebsite.com, но как только приложение пытается использовать API REST, выставленные для входа в систему, я получаю POST http://localhost: 8080 / the-app-wish / api / login net :: ERR_CONNECTION_REFUSED в консоли Chrome.
Это скриншот ошибки в консоли Chrome: Chrome ошибка консоли
Это одна из вкладок сети: Chrome вкладка сети
Позвольте мне предоставить некоторые детали и показать вам некоторый код из бэкэнда (как я уже сказал, это Spring Boot). В application.properties я определил следующее:
server.servlet.context-path=/the-app-wish
Контроллер для входа в систему имеет следующую аннотацию:
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
И методы входа в систему в пределах контроллер имеет это:
@PostMapping("/login")
В WebSecurityConfig.class у меня есть следующий метод для настройки шаблонов:
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and().csrf().disable().
authorizeRequests()
.antMatchers("/api/login", "/api/register", "/api/resetpwd", "/api/confirm-reset/**", "/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
}
А теперь некоторые подробности о внешнем интерфейсе (Angular 8 приложение). Я определил proxy.config. json следующим образом:
{
"/": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
И я добавил скрипт в файл index. html следующим образом, если базовый URL к API отличается между dev и Среды prod (но это еще не так):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Studio Scordia</title>
<base href="/">
<script type="text/javascript">
var cfgApiBaseUrl = "http://localhost:8080/the-app-wish";
/*
DEV: http://localhost:8080/the-app-wish*
PROD: http://localhost:9000/the-app-wish
*/
window.cfgApiBaseUrl = cfgApiBaseUrl;
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Наконец, мой сервис использует API REST для входа в систему (и другие) из бэкэнда:
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root'
})
export class AuthService {
private BASE_URL = window["cfgApiBaseUrl"] + "/api";
private loginUrl = `${this.BASE_URL}/login`;
private registerUrl = `${this.BASE_URL}/register`;
private resetpwdUrl = `${this.BASE_URL}/resetpwd`;
private confirmResetpwdUrl = `${this.BASE_URL}/confirm-reset`;
constructor(private http: HttpClient) { }
attemptAuth(credentials: AuthLoginInfo): Observable<JwtResponse> {
return this.http.post<JwtResponse>(this.loginUrl, credentials, httpOptions);
}
signUp(info: SignUpInfo): Observable<string> {
return this.http.post<string>(this.registerUrl, info, httpOptions);
}
resetPwd(info: ResetPwdInfo): Observable<string> {
return this.http.post<string>(this.resetpwdUrl, info, httpOptions);
}
confirmResetPwd(token: string, newPassword: ChangePassword): Observable<string> {
return this.http.post<string>(`${this.confirmResetpwdUrl}/${token}`, newPassword, httpOptions);
}
}
Я попробовал много предложений найдено на inte rnet. Добавление файла web.config в папку dist приложения Angular 8 следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Но это не помогло устранить ошибку, возникающую при запросах POST. Я также попытался развернуть FrontEnd и Backend на Tomcat, даже если я где-то читал, это не очень хорошая практика. Во всяком случае, это не сработало, так как, возможно, я не смог правильно настроить IIS. Я пытался использовать isapi_redirect.dll для перенаправления запросов на сервер TomCat из IIS, как объяснено здесь , но ошибка не исчезла go. Что я делаю неправильно? Это то, что я мог бы как-то решить с помощью файла proxy.config. json во внешнем интерфейсе? Я тоже пытался что-то сделать таким образом, но мне это не удалось. Я больше не знаю, что мне следует попробовать, и, поскольку я не настолько стар, как разработчик, я решил спросить здесь кого-то, безусловно, более опытного, чем я. К сожалению, я единственный разработчик в фирме, в которой я работаю, поэтому у меня нет других коллег, к которым можно обратиться. Поэтому, пожалуйста, любое предложение будет более чем оценено. Спасибо всем заранее.