So lösen Sie das domänenübergreifende Ajax-Problem

Lösung für das domänenübergreifende Ajax-Problem: 1. Fügen Sie einen Header zum Antwortheader hinzu, um den Zugriff zu ermöglichen. 2. JSONP unterstützt nur Get-Anfragen, aber keine Post-Anfragen. 4. Verwenden Sie Nginx, um eine Unternehmensebene zu erstellen Schnittstellen-Gateway.

Verwandte kostenlose Lernempfehlungen: ajax (Video)

ajax-übergreifende Problemlösung:

Lösung 1: Hinzufügen Header zum Antwortheader Zugriff zulassen

Cross-Origin Resource Sharing (CORS) Cross-Origin Resource Sharing

Die Sicherheitsgrundlage dieser domänenübergreifenden Zugriffslösung basiert auf „JavaScript kann diesen HTTP-Header nicht steuern“

Es erfordert eine Autorisierung über den von zurückgegebenen HTTP-Header die Zieldomäne. Gibt an, ob domänenübergreifender Zugriff zugelassen werden soll.

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

Lösung 2: JSONP unterstützt nur Get-Anfragen und keine Post-Anfragen

Verwendung: ①Datentyp in JSONP ändern ②JSONP: „jsonpCallback“————Der tatsächliche an das Backend gesendete Wert ist http:// a.a.com/ a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③Das Backend erhält den jsonpCallback in der Get-Anfrage ④Konstruieren Sie die Rückrufstruktur

$.ajax({
type : "GET",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//数据类型为jsonp  
jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
 
//后端
        String jsonpCallback = request.getParameter("jsonpCallback");
//构造回调函数格式jsonpCallback(数据)
resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

JSONP-Implementierungsprinzip

Unter derselben Ursprungsrichtlinie kann die Seite unter einem bestimmten Server die nicht erhalten Daten außerhalb des Servers, das heißt, allgemeines Ajax kann keine domänenübergreifenden Anforderungen stellen. Ausnahmen sind jedoch Tags wie img, iframe und script, die über das src-Attribut Daten auf anderen Servern anfordern können. Mithilfe der offenen Richtlinie des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags können wir Daten domänenübergreifend anfordern. Dies erfordert natürlich die Mitarbeit des Servers. Der Kern von Ajax in Jquery besteht darin, nicht zu dieser Seite gehörende Inhalte über XmlHttpRequest abzurufen, während der Kern von JSONP darin besteht, das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag dynamisch hinzuzufügen, um das vom Server bereitgestellte js-Skript aufzurufen.

　Wenn wir normalerweise JSON-Daten anfordern, gibt der Server eine Zeichenfolge mit Daten vom Typ JSON zurück, und wenn wir den JSONP-Modus zum Anfordern von Daten verwenden, gibt der Server einen ausführbaren JavaScript-Code zurück. Da das domänenübergreifende Prinzip von JSONP darin besteht, den Quellcode von 3f1c4e4b6b16bbbd69b2ee476dc4f83a dynamisch zu laden, können wir die Parameter nur über die URL übergeben, sodass der Typ von JSONP nur abgerufen werden kann!

Beispiel:

$.ajax({
    url: 'http://192.168.10.46/demo/test.jsp',        //不同的域
    type: 'GET',                                                        // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp',                                              // 数据类型
    jsonp: 'jsonpCallback',                                     // 指定回调函数名，与服务器端接收的一致，并回传回来
})

Tatsächlich wird jquery intern konvertiert in

http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

Dann dynamisch laden

<script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>

und dann wird das Backend Führen Sie jsonpCallback aus (Parameter übergeben) und senden Sie die Daten in Form tatsächlicher Parameter.

　Der gesamte Prozess der Verwendung des JSONP-Modus zum Anfordern von Daten: Der Client sendet eine Anfrage und gibt einen ausführbaren Funktionsnamen an (hier führt jQuery den Kapselungsprozess durch, generiert automatisch eine Rückruffunktion für Sie und entnimmt die Daten für die Erfolgsattributmethode). aufrufen, anstatt ein Callback-Handle zu übergeben), akzeptiert der Server den jsonpCallback-Funktionsnamen und sendet dann die Daten in Form von tatsächlichen Parametern

(im JQuery-Quellcode besteht die Implementierung von JSONP darin,

$.ajax({
type : "GET",
async : false,
url : "http://b.b.com:8080/B/FromAjaxservlet?userName=644064",
dataType : "json",
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
 
@WebServlet("/FromAjaxservlet")
public class FromAjaxservlet extends HttpServlet{
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
//创建默认连接
CloseableHttpClient httpClient = HttpClients.createDefault();
//创建HttpGet对象,处理get请求,转发到A站点
HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName="+req.getParameter("userName")); 
                        //执行
CloseableHttpResponse response = httpClient.execute(httpGet);
int code = response.getStatusLine().getStatusCode();
//获取状态
System.out.println("http请求结果为:"+code);
if(code == 200){
                                //获取A站点返回的结果
String result = EntityUtils.toString(response.getEntity());
System.out.println(result);
                                //把结果返回给B站点
resp.getWriter().print(result);
}
response.close();
httpClient.close();
} catch (Exception e) {
}
}
}

Lösung 4: Verwenden Sie Nginx, um ein Schnittstellen-Gateway auf Unternehmensebene zu erstellen verschiedene Projektnamen. Was bedeutet es? Das ist vielleicht etwas abstrakt. Angenommen, der Domänenname unseres Unternehmens lautet www.nginxtest.com

Wenn wir auf www.a.a.com zugreifen müssen, greifen Sie über www.nginxtest.com/A darauf zu und leiten Sie es über nginx an www.a.a.com weiter.

Wenn wir brauchen Um auf www.b.b.com zuzugreifen, besuchen Sie www.nginxtest.com/B und leiten Sie es über nginx an www.a.a.com weiter. Wenn wir auf den Domainnamen des Unternehmens zugreifen, handelt es sich um „dieselbe Quelle“, aber der Projektname ist unterschiedlich Diesmal dient der Projektname nur der Unterscheidung und Bequemlichkeit. Weiterleiten. Wenn Sie es immer noch nicht verstehen, schauen Sie sich an, wie ich es konfiguriert habe:

server {
        listen       80;
        server_name  www.nginxtest.com;
        location /A {
    proxy_pass  http://a.a.com:81;
index  index.html index.htm;
        }
location /B {
    proxy_pass  http://b.b.com:81;
index  index.html index.htm;
        }
    }

我们访问以www.nginxtest.com开头且端口为80的网址，nginx将会进行拦截匹配，若项目名为A，则分发到a.a.com:81。实际上就是通过"同源"的域名，不同的项目名进行区分，通过nginx拦截匹配，转发到对应的网址。整个过程，两次请求，第一次请求nginx服务器，第二次nginx服务器通过拦截匹配分发到对应的网址。

相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonSo lösen Sie das domänenübergreifende Ajax-Problem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!