Wie löst man domänenübergreifende Probleme zwischen API-Server und Front-End-Server?

Der Browser fordert statische Ressourcen wie HTML, CSS usw. vom Front-End-Server an.
Dann sendet der Browser eine Ajax-Anfrage an den API-Server, was zu einem domänenübergreifenden Problem führt.

Die aktuelle Lösung, an die ich denke,
besteht darin, sowohl die Front-End- als auch die Back-End-Ressourcen unter demselben Domänennamen zu platzieren, aber das erscheint mir nicht sehr sinnvoll.
Die zweite Möglichkeit besteht darin, einen Reverse-Proxy zu verwenden, aber ich habe es noch nicht ausprobiert und weiß nicht, ob es angemessen ist.

Wie kann ich dieses Problem über das Backend lösen?

Antwortinhalt:

Der Browser fordert statische Ressourcen wie HTML, CSS usw. vom Front-End-Server an.
Dann sendet der Browser eine Ajax-Anfrage an den API-Server, was zu einem domänenübergreifenden Problem führt.

Die aktuelle Lösung, an die ich denke,
besteht darin, sowohl die Front-End- als auch die Back-End-Ressourcen unter demselben Domänennamen zu platzieren, aber das erscheint mir nicht sehr sinnvoll.
Die zweite Möglichkeit besteht darin, einen Reverse-Proxy zu verwenden, aber ich habe es noch nicht ausprobiert und weiß nicht, ob es angemessen ist.

Wie kann ich dieses Problem über das Backend lösen?

Grundsätzlich gibt es folgende domänenübergreifende Lösungen

1. JSONP

2. CORS

3. Fenstername

4. document.domain

5. 5.location.hash

6. 6.window.postMessage()

Weitere Informationen finden Sie im folgenden Artikel: https://github.com/rccoder/bl...

Der API-Server muss lediglich den domänenübergreifenden Header festlegen. Wenn Sie ihn im Frühjahr schreiben, können Sie Code ähnlich dem folgenden verwenden

<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>

Zum Beispiel gibt es zwei Projekte: P und API

Dann ist die aufrufende Methode ähnlich: P Frontend -》P Backend -》API

Wenn das Backend des Themas Nodejs ist, können Sie den folgenden Code verwenden, um eine domänenübergreifende Umsetzung zu erreichen. Wenn es sich um einen Express-Code handelt, wird empfohlen, ihn in Middleware zu packen

<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>

Die beste Antwort gibt es bereits. Vergessen Sie nicht, withCredentials: true zu verwenden, wenn Sie das Mitbringen von Cookies anfordern.

jsonp kann referenziert werden

Access-Control-Allow-Origin: Front-End-Domänenname

Ich persönlich halte es für am zuverlässigsten, einen Reverse-Proxy zu verwenden

Es mag bequemer sein, Nginx als Reverse-Proxy zu verwenden, aber das Festlegen von domänenübergreifenden Antwortheadern ist nicht vollständig mit IE kompatibel

Reverse-Proxy ist relativ einfach

Wenn der vom Knoten geschriebene Back-End-Code Express/Koa verwendet, können Sie die cors()-Middleware direkt in den Back-End-Code einführen

Es ist bequemer, Nginx als Reverse-Proxy zu verwenden

Legen Sie einfach eine js-Datei auf den API-Server und referenzieren Sie sie im Frontend. Dann treten keine domänenübergreifenden Probleme auf, genau wie bei der Logik beim Aufruf externer Statistiken.