L'URL du projet JavaScript ne peut pas être utilisée

Dans le développement Web moderne, JavaScript est un langage extrêmement important. Il peut nous fournir des pages interactives et dynamiques. Cependant, dans le développement réel, nous rencontrons souvent certains problèmes, parmi lesquels l'URL du projet JavaScript ne peut pas être utilisée.

Ce problème est en réalité très courant. Lorsque nous essayons d'utiliser l'URL dans le projet JavaScript, nous pouvons rencontrer le message d'erreur suivant :

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.

Cela signifie que le navigateur a rejeté la demande de ressources sur le serveur dans le projet JavaScript. Il s'agit d'empêcher les attaques de requêtes intersites (CSRF).

Alors, comment résoudre ce problème ? Voici quelques solutions :

1. Utilisez un serveur proxy

Un serveur proxy peut résoudre le problème des requêtes inter-domaines. Nous pouvons utiliser un serveur proxy comme pont dans les projets JavaScript pour demander des ressources cibles. Par exemple, nous pouvons utiliser le middleware http-proxy-middleware pour implémenter un serveur proxy.

Ce middleware peut être déployé dans le backend de Node.js puis utilisé dans le projet JavaScript :

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

Ce code supprimera tous les projets JavaScript commençant par les requêtes d'URL /api sont transmis à http://example.com. Le serveur proxy étant déployé sur le backend, il ne sera pas intercepté par le navigateur. /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. Ajouter un en-tête CORS

CORS (Cross-Origin Resource Sharing) est un mécanisme de partage de ressources inter-domaines. Si le serveur prend en charge CORS, il ajoutera l'en-tête Access-Control-Allow-Origin à l'en-tête de réponse, qui peut spécifier la liste des sources autorisées à accéder. #🎜🎜##🎜🎜#Si vous avez l'autorisation de modifier le code côté serveur, vous pouvez ajouter cet en-tête à l'en-tête de réponse : #🎜🎜#rrreee#🎜🎜#De cette façon, le navigateur n'interceptera pas le JavaScript demande de projet. #🎜🎜##🎜🎜#3. Utiliser JSONP#🎜🎜##🎜🎜#JSONP est une technologie qui permet les requêtes inter-domaines. Son principe est d'utiliser l'attribut src de l'élément script pour ne pas être restreint par la politique de même origine, et pouvoir charger des fichiers JavaScript depuis d'autres noms de domaine. #🎜🎜##🎜🎜#Si vous ne pouvez pas modifier le code côté serveur ou si le serveur ne prend pas en charge CORS, vous pouvez essayer d'utiliser JSONP. La méthode spécifique consiste à ajouter le code suivant au projet JavaScript : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, nous avons ajouté un élément de script au projet JavaScript et défini l'attribut src sur l'URL de la ressource cible. Nous définissons le paramètre callback sur une fonction de rappel, qui sera appelée après le chargement de la ressource cible. Les données renvoyées par la ressource cible peuvent être traitées dans la fonction de rappel. #🎜🎜##🎜🎜# En résumé, lorsque l'url ne peut pas être utilisée dans un projet JavaScript, vous pouvez utiliser l'une des trois solutions ci-dessus : utiliser un serveur proxy, ajouter un en-tête CORS ou utiliser JSONP. Choisir différentes solutions en fonction de différentes situations peut nous aider à résoudre ce problème en douceur. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!