Comment résoudre les problèmes de domaine de réaction croisée

Solution pour réagir au problème inter-domaines : ajoutez d'abord [proxy": "http://localhost:8000] à [package.json] puis demandez dans la page [fetch('/api/userdata / ')] sera transmis à l'adresse indiquée dans la procuration.

Solution pour réagir au problème inter-domaines :

1. L'opération la plus simple

Ajoutez "proxy": "http://localhost:8000"

à package.json, puis la requête fetch('/api/userdata/') dans votre page sera transmise à l'adresse dans le proxy

C'est-à-dire que la vraie requête est http://0.0.2.89:7300/api/userdata/, et il n'y aura aucun problème entre domaines

Parce que du point de vue du navigateur, vous venez d'envoyer fetch(' /api/userdata/'), il n'y a pas de problème inter-domaines

2. Ajoutez plusieurs proxys

Ajoutez

"proxy": {
"/api": {
"target": "http://localhost:8000",
"changeOrgin": true
},
"/app": {
"target": "http://localhost:8001",
"changeOrgin": true
}
},

à package.json utiliser la méthode

axios.post('/api/users').then(res =>{
console.log(res)
})

Mais lorsque npm start est réexécuté, une erreur sera signalée, indiquant que la valeur de "proxy" doit être un type de chaîne, pas un objet.

La raison est que la version du module React-scripts est trop élevée. Vous devez supprimer le dossier React-scripts dans node_modules dans le répertoire d'origine et installer une version inférieure

npm install. réagir-script@1.1 .1 --save

Il est vrai que le problème inter-domaines peut être résolu, mais un nouveau problème est apparu, j'ai utilisé sass dans le projet après avoir changé les scripts de réaction en un. version inférieure, sass n'est pas pris en charge pour l'analyse, si vous souhaitez prendre en charge sass, vous devez le configurer dans node_modules/react-scripts/config, mais ce n'est pas recommandé.

3. Meilleure recommandation

Télécharger http-proxy-middleware

npm et http-proxy-middleware --save

Créez src/setupProxy.js

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
// /api 表示代理路径
// target 表示目标服务器的地址
app.use(
proxy('/api', {
// http://localhost:4000/ 地址只是示例，实际地址以项目为准
target: 'http://localhost:4000',
// 跨域时一般都设置该值 为 true
changeOrigin: true,
// 重写接口路由
pathRewrite: {
'^/api': '' // 这样处理后，最终得到的接口路径为： http://localhost:8080/xxx
}
})
)
}

Recommandations d'apprentissage gratuites associées : JavaScript(vidéo)

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!