Die JavaScript-Projekt-URL kann nicht verwendet werden

In der modernen Webentwicklung ist JavaScript eine äußerst wichtige Sprache. Es kann uns interaktive und dynamische Seiten bereitstellen. In der tatsächlichen Entwicklung stoßen wir jedoch häufig auf einige Probleme. Eines davon ist das Problem, dass die URL im JavaScript-Projekt nicht verwendet werden kann.

Dieses Problem kommt tatsächlich sehr häufig vor. Wenn wir versuchen, die URL im JavaScript-Projekt zu verwenden, wird möglicherweise die folgende Fehlermeldung angezeigt:

XMLHttpRequest cannot load http://example.com/resource. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Das bedeutet, dass der Browser die Anforderung von Ressourcen auf dem Server im JavaScript-Projekt abgelehnt hat. Dadurch sollen Cross-Site-Request-Angriffe (CSRF) verhindert werden.

Also, wie kann man dieses Problem lösen? Hier sind einige Lösungen:

1 Verwenden Sie einen Proxyserver

Ein Proxyserver kann das Problem domänenübergreifender Anfragen lösen. Wir können einen Proxyserver als Brücke in JavaScript-Projekten verwenden, um Zielressourcen anzufordern. Beispielsweise können wir die Middleware http-proxy-middleware verwenden, um einen Proxyserver zu implementieren.

Diese Middleware kann im Backend von Node.js bereitgestellt und dann im JavaScript-Projekt verwendet werden:

// 在JavaScript工程中使用
app.use('/api', proxy({ target: 'http://example.com', changeOrigin: true }));

Dieser Code entfernt alle JavaScript-Projekte, die mit /api werden an http://example.com weitergeleitet. Da der Proxyserver im Backend bereitgestellt wird, wird er vom Browser nicht abgefangen. /api开头的url请求转发到http://example.com上。因为是在后端部署代理服务器，所以不会被浏览器拦截。

2. 添加CORS header

CORS（Cross-Origin Resource Sharing）是一种跨域资源共享机制。如果服务器支持CORS，它会在响应头中加入Access-Control-Allow-Origin这个header，可以指定允许访问的源列表。

如果你有权限修改服务器端的代码，可以在响应头中添加这个header:

Access-Control-Allow-Origin: http://localhost:3000

这样，浏览器就不会拦截JavaScript工程的请求了。

3. 使用JSONP

JSONP是一种允许跨域请求的技术。它的原理是利用script元素的src属性不受同源策略限制，可以加载来自其他域名的JavaScript文件。

如果你无法修改服务器端的代码，或者服务器不支持CORS，可以尝试使用JSONP。具体方法是，在JavaScript工程中添加如下代码：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/resource?callback=onResponse';
document.head.appendChild(script);

function onResponse(data) {
  console.log(data);
}

这个例子中，我们在JavaScript工程中添加了一个script元素，并将src属性设置为目标资源的url。我们将callback

2. CORS-Header hinzufügen

CORS (Cross-Origin Resource Sharing) ist ein domänenübergreifender Ressourcenfreigabemechanismus. Wenn der Server CORS unterstützt, fügt er den Header Access-Control-Allow-Origin zum Antwortheader hinzu, der die Liste der Quellen angeben kann, auf die zugegriffen werden darf. #🎜🎜##🎜🎜#Wenn Sie die Berechtigung zum Ändern des serverseitigen Codes haben, können Sie diesen Header zum Antwortheader hinzufügen: #🎜🎜#rrreee#🎜🎜#Auf diese Weise fängt der Browser das JavaScript nicht ab Projektanfrage. #🎜🎜##🎜🎜#3. Die Verwendung von JSONP#🎜🎜##🎜🎜#JSONP ist eine Technologie, die domänenübergreifende Anfragen ermöglicht. Sein Prinzip besteht darin, das src-Attribut des Skriptelements zu verwenden, um nicht durch die Same-Origin-Richtlinie eingeschränkt zu werden, und JavaScript-Dateien von anderen Domänennamen laden zu können. #🎜🎜##🎜🎜#Wenn Sie den serverseitigen Code nicht ändern können oder der Server CORS nicht unterstützt, können Sie es mit JSONP versuchen. Die spezifische Methode besteht darin, dem JavaScript-Projekt den folgenden Code hinzuzufügen: #🎜🎜#rrreee#🎜🎜#In diesem Beispiel haben wir dem JavaScript-Projekt ein Skriptelement hinzugefügt und das src-Attribut auf die URL der Zielressource festgelegt. Wir setzen den Parameter callback auf eine Callback-Funktion, die aufgerufen wird, nachdem die Zielressource geladen wurde. Die von der Zielressource zurückgegebenen Daten können in der Callback-Funktion verarbeitet werden. #🎜🎜##🎜🎜# Zusammengefasst: Wenn die URL nicht in einem JavaScript-Projekt verwendet werden kann, können Sie eine der oben genannten drei Lösungen verwenden: Verwenden Sie einen Proxyserver, fügen Sie einen CORS-Header hinzu oder verwenden Sie JSONP. Die Auswahl unterschiedlicher Lösungen je nach Situation kann uns dabei helfen, dieses Problem reibungslos zu lösen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonDie JavaScript-Projekt-URL kann nicht verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!