javascript - 프론트엔드와 백엔드를 분리할 때 도메인 간 문제를 어떻게 해결합니까?

현재 블로그 작업을 할 때 프런트엔드와 백엔드 분리를 사용하고 프런트엔드와 백엔드 로직을 두 개의 별도 저장소에 배치하고 두 대의 서버에 배포하는 것을 고려하고 있습니다.

내 메인 도메인 이름은 godtail.cn입니다. (현재 ghost을 사용하여 새 블로그를 작성 중입니다...)

• 프런트 엔드 도메인 이름: www.godtail.cn godtail.cn | m.godtail.cn

  백엔드 도메인 이름은

• 입니다. api.godtail.cn

  그런데 통신을 해보니
라는 메시지가 나오는 걸 발견했습니다. 뭐, 메인 도메인 이름이 같으면 도메인 간은 안 되는 줄 알았어요(같은 도메인 이름, 다른 포트도 도메인 간이겠죠).

현재 문제를 해결하는 두 가지 방법을 알고 있습니다. 跨域

JSONP를 사용하세요. 솔직히 저는 JSONP를 사용하는 것을 별로 좋아하지 않습니다. 보안 문제가 발생하거나 효율성이 저하될 것 같습니다. (이 두 가지 사항은 단지 제 추측입니다.)

1. 추측이유 :

   
   

   어떤 소스에서든 액세스할 수 있습니다. js 삽입이 있나요?

   • 백엔드와 프런트엔드 모두 처리를 위해 JSONP가 필요합니다. (작성하기 불편하며 모든 요청은 JSONP를 사용해야 합니다.)

   백엔드에 교차 도메인 헤더 추가

2. 프런트 엔드 도메인 이름이 많으면 많은 도메인 이름을 추가하고 유지 관리해야 합니다. 다른 시스템에서 인터페이스를 요청해야 하는 경우 교차 도메인 헤더를 추가하시겠습니까? 다루기가 쉽지 않네요...
   더 나은 해결책을 갖고 있는 사람이 있나요?

================【9-22 17:25】======================

또한 크로스 도메인 헤더를 설정하면 내부 통화 전용 IP도 설정할 수 있습니다. 외부 호출이 필요한 경우에는 만족스럽지 않을 것입니다. 또한 이전 버전의 브라우저와 호환성 문제가 있는지 확실하지 않습니다.

답글 내용:

현재 블로그 작업을 할 때 프런트엔드와 백엔드 분리를 사용하고 프런트엔드와 백엔드 로직을 두 개의 별도 저장소에 배치하고 두 대의 서버에 배포하는 것을 고려하고 있습니다.

내 메인 도메인 이름은

입니다. (현재

을 사용하여 새 블로그를 작성 중입니다...)

godtail.cn ghost

프런트 엔드 도메인 이름:

• |

  www.godtail.cn백엔드 도메인 이름은 godtail.cnm.godtail.cn

  입니다.
• 그런데 통신을 해보니

  라는 메시지가 나오는 걸 발견했습니다. 뭐, 메인 도메인 이름이 같으면 도메인 간은 안 되는 줄 알았어요(같은 도메인 이름, 다른 포트도 도메인 간이겠죠). api.godtail.cn

  현재 저는 이 문제를 해결하는 두 가지 방법을 알고 있습니다.

跨域JSONP를 사용하세요. 솔직히 저는 JSONP를 사용하는 것을 별로 좋아하지 않습니다. 보안 문제가 발생하거나 효율성이 저하될 것 같습니다. (이 두 가지 사항은 단지 제 추측입니다.)

추측이유 :

1. 
   어떤 소스에서든 액세스할 수 있습니다. js 삽입이 있나요?

   백엔드와 프런트엔드 모두 처리를 위해 JSONP가 필요합니다. (작성하기 불편하며 모든 요청은 JSONP를 사용해야 합니다.)

   • 백엔드에 교차 도메인 헤더 추가

프런트 엔드 도메인 이름이 많으면 많은 도메인 이름을 추가하고 유지 관리해야 합니다. 다른 시스템에서 인터페이스를 요청해야 하는 경우 교차 도메인 헤더를 추가하시겠습니까? 다루기가 쉽지 않네요...

2. • 더 나은 해결책을 갖고 있는 사람이 있나요?

   ================【9-22 17:25】======================
또한 크로스 도메인 헤더를 설정하면 내부 통화 전용 IP도 설정할 수 있습니다. 외부 호출이 필요한 경우에는 만족스럽지 않을 것입니다. 또한 이전 버전의 브라우저와 호환성 문제가 있는지 확실하지 않습니다.

물론 백엔드에 추가됩니다

말씀하신 프런트엔드에 도메인 이름이 너무 많은 문제는 백엔드에서 몇 가지 트릭을 사용하여 처리하도록 하세요. 문제 없습니다.

아이디어: 하드 코딩된 도메인 이름이나

대신

도메인 이름(Access-Control-Allow-Origin)에 대한 대상을 추가하세요.
대략적인 구현(의사 코드):
Access-Control-Allow-Origin Origin 请求头하지만 다시 요청 헤더를 시뮬레이션할 수 있으므로 인터페이스 요청 매개변수를 암호화하고 프런트엔드 스크립트를 압축 및 난독화하는 것이 좋습니다*NetEase Cloud Music의 인터페이스 암호화를 참조하세요(패키지를 가져와서 살펴보세요)

백엔드에 교차 도메인 헤더를 추가하여 모든 도메인 이름을 허용한 다음 코드에서 도메인 이름을 필터링하는 것을 고려하세요. 요구 사항을 충족하지 않는 도메인 이름은 404를 직접 반환합니다.

<code>// 允许跨域访问的域名数组
string[] allowOrigins = 
{
    "http://www.godtail.cn/", 
    "http://godtail.cn/", 
    "http://m.godtail.cn/",
};

// 判断 origin 是否是自己的前端域名，如果是则添加
if(allowOrigins.Count(x => x.Contains(Request.Headers["Origin"])) > 0)
    Response.Header.Add("Access-Control-Allow-Origin", Request.Headers["Origin"]);</code>

nginx 역방향 프록시... 스스로 질문하고 대답한 것으로 밝혀졌습니다...

서버 측에서 'Access-Control-Allow-Origin:*' 헤더를 설정합니다.

위에서 언급한 내용입니다. 접속주소를 지정하시면 됩니다~

프런트엔드 코드가 손실되지 않는 서버에서 도메인 이름 전달

크로스 도메인 헤더는 일반 형식으로 작성할 수 없나요?

제가 채택한 첫 번째 방법인 jsonp, callback은 이런 요청이 너무 많으면 작성하기가 번거로울 것입니다.
두 번째 방법은 시도해 봤는데 안 되더라구요. 응답에 Control-Allow-Origin..*?