Solution de requêtes inter-domaines React : comment gérer les problèmes d'accès inter-domaines dans les applications frontales

Solution de requêtes inter-domaines React : Comment gérer les problèmes d'accès inter-domaines dans les applications front-end, des exemples de code spécifiques sont nécessaires

Dans le développement front-end, nous rencontrons souvent le problème des requêtes inter-domaines. Une requête inter-domaine signifie que l'adresse cible (nom de domaine, port, protocole) de la requête HTTP envoyée par l'application frontale n'est pas cohérente avec l'adresse de la page actuelle. En raison de la politique de même origine du navigateur, les requêtes inter-domaines sont restreintes. Cependant, dans le développement réel, nous avons souvent besoin de communiquer avec différents serveurs, la solution pour les requêtes inter-domaines est donc particulièrement importante.

Cet article présentera la solution de requête inter-domaines React et donnera des exemples de code spécifiques.

1. JSONP

JSONP est une solution pour les requêtes inter-domaines. Elle profite du fait que la balise <script></script> n'a aucune restriction inter-domaine. Les étapes spécifiques de mise en œuvre sont les suivantes : <script></script>标签没有跨域限制的特性。具体实现步骤如下：

1. 在前端应用中，增加一个<script></script>标签，将服务端的URL作为其src属性的值。
2. 在服务端，处理该请求，并返回一个函数调用，该函数作为回调函数，将数据以参数的形式传递给前端应用。
3. 前端应用在加载完该<script></script>标签后，就可以获取到从服务端返回的数据。

以下是一个示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  window[callback] = function(data) {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  };
  document.body.appendChild(script);
}

function fetchUserData() {
  jsonp('http://api.example.com/user', 'handleUserData');
}

function handleUserData(data) {
  // 处理从服务端返回的数据
}

fetchUserData();

二、CORS

CORS（Cross-Origin Resource Sharing）是浏览器提供的一种跨域请求的解决方案，它通过在HTTP请求头中添加特定字段，实现跨域请求的权限控制。以下是使用CORS进行跨域请求的示例代码：

fetch('http://api.example.com/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 设置允许跨域的域名
  },
})
.then(response => response.json())
.then(data => {
  // 处理从服务端返回的数据
})
.catch(error => {
  console.error(error);
});

在服务端，需要设置响应头中的Access-Control-Allow-Origin字段，指定允许跨域访问的域名。如果允许所有域名都跨域访问，可以设置该字段的值为*。

三、使用反向代理

另一种常见的解决跨域请求问题的方法是使用反向代理。具体步骤如下：

1. 在本地开启一个代理服务器，将目标服务器的请求转发到代理服务器上。
2. 再由代理服务器将请求发送到目标服务器，并将响应返回给前端应用。

这样，前端应用发送的请求就可以绕过浏览器的同源策略，实现了跨域请求。

以下是一个使用反向代理的示例代码：

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({ target: 'http://api.example.com', changeOrigin: true }));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

通过上述代码，我们将/api开头的请求转发到了http://api.example.com

1. Dans l'application front-end, ajoutez une balise <script></script> et utilisez l'URL du serveur comme valeur de son src Attribut .
2. Côté serveur, traitez la requête et renvoyez un appel de fonction, qui sert de fonction de rappel et transmet les données à l'application frontale sous forme de paramètres.
3. Après avoir chargé la balise <script></script>, l'application frontale peut obtenir les données renvoyées par le serveur.

Ce qui suit est un exemple de code :

rrreee

2. CORS

CORS (Cross-Origin Resource Sharing) est une solution de requête inter-domaines fournie par le navigateur. Elle utilise des requêtes HTTP pour ajouter des informations spécifiques. champs à l’en-tête pour implémenter le contrôle des autorisations pour les requêtes inter-domaines. Voici un exemple de code permettant d'utiliser CORS pour effectuer des requêtes inter-domaines : 🎜rrreee🎜Côté serveur, vous devez définir le champ Access-Control-Allow-Origin dans l'en-tête de réponse pour spécifier le nom de domaine qui permet l'accès entre domaines. Si l'accès inter-domaines est autorisé pour tous les noms de domaine, la valeur de ce champ peut être définie sur *. 🎜🎜3. Utilisez un proxy inverse🎜🎜Une autre façon courante de résoudre le problème des requêtes inter-domaines consiste à utiliser un proxy inverse. Les étapes spécifiques sont les suivantes : 🎜

1. Ouvrez un serveur proxy localement et transférez la requête du serveur cible au serveur proxy.
2. Le serveur proxy envoie ensuite la requête au serveur cible et renvoie la réponse à l'application frontale.

🎜De cette manière, les requêtes envoyées par l'application frontale peuvent contourner la politique de même origine du navigateur et implémenter des requêtes inter-domaines. 🎜🎜Ce qui suit est un exemple de code utilisant un proxy inverse : 🎜rrreee🎜Avec le code ci-dessus, nous transmettons la requête commençant par /api à http://api.example.com. 🎜🎜Résumé : 🎜🎜Cet article présente trois solutions pour les requêtes inter-domaines React : JSONP, CORS et l'utilisation d'un proxy inverse. Dans le développement réel, en fonction de scénarios et d'exigences d'application spécifiques, vous pouvez choisir une solution appropriée pour gérer les requêtes inter-domaines. J'espère que le contenu de cet article sera utile pour résoudre les problèmes de requêtes inter-domaines de React. 🎜

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!