API 서버와 프런트엔드 서버 간의 도메인 간 문제를 해결하는 방법은 무엇입니까?

브라우저가 HTML, CSS 등 프런트엔드 서버에 정적 리소스를 요청합니다.
그런 다음 브라우저는 api 서버에 ajax 요청을 하여 크로스 도메인 문제를 일으킵니다.

현재 제가 생각하고 있는 해결방안
은 프론트엔드 리소스와 백엔드 리소스를 모두 동일한 도메인 이름으로 두는 것인데 별로 합리적이지 않다고 느껴집니다.
두 번째는 역방향 프록시를 사용하는 방법인데 아직 사용해본 적이 없고 적합한지도 모르겠습니다.

백엔드를 통해 이 문제를 어떻게 해결할 수 있나요?

답글 내용:

브라우저가 HTML, CSS 등 프런트엔드 서버에 정적 리소스를 요청합니다.
그런 다음 브라우저가 api 서버에 ajax 요청을 하여 크로스 도메인 문제가 발생합니다.

현재 제가 생각하고 있는 해결방안
은 프론트엔드 리소스와 백엔드 리소스를 모두 동일한 도메인 이름으로 두는 것인데 별로 합리적이지 않다고 느껴집니다.
두 번째는 역방향 프록시를 사용하는 방법인데 아직 사용해본 적이 없고 적합한지도 모르겠습니다.

백엔드를 통해 이 문제를 어떻게 해결할 수 있나요?

기본적으로 다음과 같은 크로스 도메인 솔루션이 있습니다

1. JSONP

2. 코르스

3. 창.이름

4. document.domain

5. 5.location.hash

6. 6.window.postMessage()

자세한 내용은 다음 글을 참고해주세요 https://github.com/rccoder/bl...

API 서버는 크로스 도메인 헤더만 설정하면 됩니다. 스프링으로 작성한다면 다음과 비슷한 코드를 사용하면 됩니다

<code>@Component
public class CorsFilter implements Filter {
    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "你的前端服务器地址");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE, HEAD, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, X-Auth-Token, Content-Type");
        response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, X-Auth-Token, Content-Type, X-TOTAL-COUNT");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}</code>

예를 들어 P와 API라는 두 가지 프로젝트가 있습니다

그러면 호출 방법은 비슷합니다: P 프론트 엔드 -》P 백 엔드 -》API

주제의 백엔드가 Nodejs인 경우 다음 코드를 사용하여 크로스 도메인을 구현할 수 있습니다. Express인 경우 미들웨어로 패키징하는 것이 좋습니다

<code>res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers','x-requested-with,content-type');</code>

가장 좋은 대답은 이미 있습니다. 쿠키 가져오기를 요청할 때 withCredentials: true를 사용하는 것을 잊지 마세요

jsonp 참조 가능

Access-Control-Allow-Origin: 프런트엔드 도메인 이름

개인적으로는 역방향 프록시를 사용하는 것이 가장 안정적이라고 생각합니다

역방향 프록시에는 nginx를 사용하는 것이 더 편리할 수 있지만 도메인 간 응답 헤더 설정은 IE와 완전히 호환되지 않습니다

역방향 프록시는 비교적 간단합니다

노드가 작성한 백엔드 코드가 express/koa를 사용한다면 백엔드 코드에 cors() 미들웨어를 직접 도입할 수 있습니다

역방향 프록시로 nginx를 사용하는 것이 더 편리합니다

API 서버에 js 파일을 넣고 프런트 엔드에서 참조하면 외부 통계 호출 논리와 마찬가지로 도메인 간 문제가 발생하지 않습니다.