프런트엔드 및 백엔드 조인트 디버깅이란 무엇입니까?
일반적으로 백엔드 엔지니어가 인터페이스를 설계하고 인터페이스 문서를 작성하며, 인터페이스 문서는 프런트엔드 엔지니어에게 전달되고 프런트엔드와 백엔드 엔지니어가 병행하여 개발을 시작합니다. 개발을 위해 모의 데이터(가짜 데이터)를 사용합니다. 현재 백엔드 코드가 완료된 후 인터페이스 조인트 디버깅이 시작됩니다. 프론트엔드 엔지니어는 모의 데이터를 변경하여 이를 얻기 위해 백엔드 인터페이스에 요청합니다. 프론트엔드 코드는 인터페이스가 정상인지 테스트하기 위해 백엔드 서비스를 요청하며, 이 프로세스는 프런트엔드와 백엔드 공동 디버깅입니다.
현재 프런트엔드 조인트 디버깅에 문제가 있는 경우 테스트 환경에서 인터페이스의 요청 및 응답 데이터 내용을 기반으로 인터페이스 문서의 요구 사항을 충족하는지 여부를 판단해야 합니다. 문제가 프런트엔드 또는 백엔드인 것으로 확인되면 특정 엔지니어가 결함을 수정하고 수정 후 다시 회귀 테스트를 수행합니다.
티칭시 프론트엔드와 백엔드 조인트 디버깅을 수행하기 위해서는 먼저 프론트엔드 환경을 구성하고, 다음으로 프론트엔드 프로젝트가 실행되는 환경을 설치합니다.
먼저 소프트웨어 도구 디렉터리에서 node-v16.17.0-x64.msi를 찾아 nodejs를 설치하세요.
설치가 완료되었습니다. 버전번호를 확인하세요.
아래 프론트엔드 프로젝트를 시작하고, 프론트엔드 프로젝트에서 project-xczx2-portal-vue-ts.zip을 코드 디렉터리에 복사하고 압축을 푼 후 IDEA 또는 VS Code를 사용하여 project-xczx2-portal-vue를 엽니다. -ts 디렉토리 다음은 IDEA를 예로 사용합니다.
project-xczx2-portal-vue-ts 디렉터리에서 package.json 파일을 마우스 오른쪽 버튼으로 클릭하고,
npm 스크립트 표시를 클릭하여 npm 창을 엽니다.
"'serve' 설정 편집"을 클릭하고 아래 시작 프로젝트의 일부 매개변수를 구성한 후 nodejs, npm을 선택하세요.
Serve를 마우스 오른쪽 버튼으로 클릭하고 "Run Serve"를 클릭하여 프로젝트를 시작합니다.
시작이 성공했음을 나타내는 다음 액세스 링크가 나타납니다.
프런트엔드 프로젝트에 액세스하려면 http://localhost:8601을 방문하세요.
문제가 있으면 다음 명령으로 시작하십시오.
1. cmd를 사용하여 프로젝트 루트 디렉터리에 들어갑니다.
2. 다음 명령을 실행하십시오
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm 나
npm 실행 서브
시스템 관리 서비스 설치
프런트엔드 프로젝트가 성공적으로 시작되었으며 http://localhost:8601/ 주소를 통해 브라우저를 통해 프런트엔드 프로젝트에 액세스됩니다 .
프런트엔드 프로젝트에서 보고된 오류는 다음과 같습니다.
http://localhost:8601/system/dictionary/all은 시스템 관리 서비스를 가리킵니다. 우리는 데이터 사전 테이블을 가지고 있으며, 이 링크는 데이터 사전 데이터를 얻기 위해 백엔드에 요청하기 위해 프런트 엔드에서 사용하는 인터페이스 주소입니다.
프로젝트에 대한 사전 정보는 데이터 사전 테이블에 구성되며, 이 인터페이스는 사전의 모든 데이터를 쿼리하는 것이므로 여기서는 개발하지 않습니다.
강좌 자료/프로젝트 엔지니어링 디렉토리에서 xuecheng-plus-system.zip을 가져와서 압축을 풉니다.
xuecheng-plus-system 디렉터리를 프로젝트 루트 디렉터리에 복사하거나, maven을 새로 고치거나, pom.xml을 마우스 오른쪽 버튼으로 클릭하여 pom 프로젝트로 변환합니다.
xuecheng-plus-system-service 프로젝트를 입력하고 리소스 아래에서 application.yml을 찾아 데이터베이스 연결 매개변수를 수정합니다.
시스템 관리 서비스를 시작합니다. 시작이 성공했습니다. 브라우저에서 요청: http://localhost:63110/system/dictionary/all
시스템 서비스의 포트는 63110입니다.
데이터 사전 정보를 정상적으로 읽을 수 있으면 시스템 관리 서비스가 성공적으로 설치된 것입니다. ,
도메인 간 문제 해결
http://localhost:8601/ 에서 브라우저를 통해 프런트엔드 프로젝트에 액세스합니다 .
Chrome 브라우저에서 다음 오류를 보고합니다.
원본 'http://localhost:8601'의 'http://localhost:63110/system/dictionary/all'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 'Access-Control-Allow-Origin' 헤더가 없습니다. 요청한 리소스에 대해.
Firefox 브라우저는 다음 오류를 보고합니다.
교차 출처 요청 차단: 동일 출처 정책은 http://localhost:63110/system/dictionary/all 에 있는 원격 리소스 읽기를 금지합니다. (원인: CORS 헤더 'Access-Control-Allow-Origin'이 누락되었습니다.) 상태 코드: 200.
팁 : http://localhost: 8601에서 http://localhost:63110/system/dictionary/all에 액세스하는 것은 Access-Control-Allow-Origin 헤더 정보가 없기 때문에 CORS 정책에 의해 차단됩니다. CORS의 정식 명칭은 Cross Origin Resource Share이며, 이는 도메인 간 리소스 공유를 의미합니다.
이 메시지가 표시되는 이유는 도메인 간 요청이 브라우저의 동일 출처 정책을 기반으로 하는지 확인하기 위한 것입니다. 동일 출처 정책은 브라우저의 보안 메커니즘입니다. 한 주소에서 다른 주소로 요청할 때 프로토콜이 호스트 , , port 가 모두 일치하면 cross-domain에 속하지 않으며, 그렇지 않으면 불일치가 있어 cross-domain 요청이 됩니다.
예를 들어:
http://localhost:8601 에서 http://localhost:8602 까지는 포트가 다르기 때문에 크로스 도메인입니다.
http://192.168.101.10:8601 에서 http://192.168.101.11:8601 까지 호스트가 다르기 때문에 크로스 도메인입니다.
프로토콜이 다르기 때문에 http://192.168.101.10:8601 에서 https://192.168.101.10:8601 까지 크로스 도메인입니다.
참고: 서버 간에는 도메인 간 요청이 없습니다.
브라우저가 요청이 도메인 간 요청이라고 판단하면 요청 헤더에 출처를 추가하여 요청 소스를 나타냅니다.
예를 들어:
일반
텍스트 GET / HTTP/1.1
원본: http://localhost:8601
서버는 요청을 받으면 Origin이 Cross-Domain 요청을 허용하는지 확인하고, 그렇다면 다음과 같이 이 Origin의 Cross-Domain 요청을 허용한다고 응답 헤더에 명시합니다.
일반 텍스트
액세스 제어-허용-원본: http://localhost:8601
모든 도메인 이름 원본의 원본 간 요청이 허용되는 경우 응답은 다음과 같습니다.
일반 텍스트
액세스 제어-허용-원본:*
도메인 간 문제에 대한 솔루션:
1、JSONP
스크립트 태그의 src 속성을 통해 크로스 도메인 요청을 합니다. 서버가 콘텐츠로 응답하려면 먼저 요청 매개변수인 콜백의 값을 읽습니다. 콜백은 콜백 함수의 이름입니다. 서버가 그 값을 읽은 후 콜백의 경우 콜백 함수를 호출하여 요청 측에 알리는 방식으로 콘텐츠로 응답합니다. 아래 그림과 같이:
2. 응답 헤더 추가
서버는 응답 헤더에 Access-Control-Allow-Origin을 추가합니다. *
3. nginx 프록시를 통한 도메인 간
서버 간 크로스 도메인이 없기 때문에 브라우저는 nginx를 사용하여 크로스 도메인 주소에 접근합니다.
1) 브라우저는 먼저 nginx에서 제공하는 주소인 http://192.168.101.10:8601 에 접속하여 해당 페이지로 들어갑니다.
2) 해당 페이지는 http://192.168.101.11:8601 에 대한 크로스 도메인 접근이 필요하며 , 도메인 간 http://www.baidu.com:8601 에 직접 접근할 수 없으며 , 대신 nginx와 같은 동종 주소에 접근합니다. : http://192.168.101.11:8601/api , http://192.168.101.11:8601/api 프록시를 통해 http://www.baidu.com:8601 에 액세스합니다 .
이를 통해 도메인 간 액세스가 가능해집니다.
브라우저가 http://192.168.101.11:8601/api 로 이동하면 교차 도메인이 없습니다.
nginx는 서버를 통해 http://www.baidu.com:8601 과 통신하며 크로스 도메인이 없습니다.
우리는 교차 도메인 문제를 해결하기 위해 옵션 2를 사용할 것입니다. 콘텐츠 관리의 api 프로젝트 구성 패키지 아래에 GlobalCorsConfig.java를 작성합니다.
코드는 아래와 같이 표시됩니다.
package com.xuecheng.system.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @description 跨域过虑器
* @author Mr.M
* @date 2022/9/7 11:04
* @version 1.0
*/
@Configuration
public class GlobalCorsConfig {
/**
* 允许跨域调用的过滤器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允许白名单域名进行跨域调用
config.addAllowedOrigin("*");
//允许跨越发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}이 구성 클래스는 도메인 간 필터를 구현하고 응답 헤더에 Access-Control-Allow-Origin을 추가합니다.
시스템 관리 서비스를 다시 시작하면 프런트 엔드 프로젝트에서 정상적으로 http://localhost:8601 을 입력 하고 브라우저 기록을 관찰하여 도메인 간 문제를 성공적으로 해결할 수 있습니다.
프런트엔드 및 백엔드 조인트 디버깅
여기서 프론트엔드와 백엔드 조인트 디버깅의 목적은 프론트엔드와 백엔드 조인트 디버깅 과정을 경험하는 것이며 테스트 기능은 코스 쿼리 기능입니다.
1. 프런트 엔드 프로젝트를 시작한 다음 콘텐츠 관리 서버를 시작합니다.
2. 서버 주소 수정
프런트엔드는 기본적으로 프로젝트의 게이트웨이 주소로 연결되어 있는데 아직 게이트웨이 프로젝트가 생성되지 않았기 때문에 프런트엔드 프로젝트의 파라미터 설정 파일을 변경하고 게이트웨이 주소를 콘텐츠 관리 주소로 수정해야 합니다. 서비스.
프런트엔드 프로젝트를 시작하고, 프런트엔드를 사용하여 백엔드 인터페이스에 액세스하고, 프런트엔드 인터페이스의 데이터가 올바른지 관찰합니다.
프론트엔드 홈페이지 접속 후 강좌관리 입력 :
http://localhost:8601/#/organization/course-list
강좌 조건 및 페이징 매개변수를 변경하여 강좌 조회 목록이 정상적으로 표시되는지 테스트해 보세요.
콘텐츠 관리 서비스의 출력 로그를 추적하여 정상인지 확인합니다.
이 시점에서 프론트엔드와 백엔드 조인트 튜닝은 기본적으로 완료됩니다.