교차 반응 도메인 문제를 해결하는 방법

교차 도메인 문제에 대응하는 솔루션: 먼저 [package.json]에 [proxy": "http://localhost:8000]을 추가한 다음 페이지에서 [fetch('/api/userdata/')]를 요청합니다. 프록시의 주소로 전달됩니다.

도메인 간 문제 대응 솔루션:

1. 가장 간단한 작업

package.json에 "proxy": "http://localhost:8000"

을 추가한 다음 fetch('/api/userdata in your page /')를 요청합니다. )은 프록시

의 주소로 전달됩니다. 즉, 실제 요청은 http://0.0.2.89:7300/api/userdata/이며, browser, 방금 fetch('/api/userdata/')를 보냈습니다. 도메인 간 문제는 없습니다

2. 여러 프록시를 추가합니다

package.json에

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

Usage 메서드

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

를 추가합니다. 그러나 다시 -executing npm이 시작되면 "proxy"의 값이 Object가 아닌 문자열 유형이어야 한다는 오류가 보고됩니다.

이유는 React-scripts 모듈의 버전이 너무 높기 때문입니다. 원래 디렉터리의 node_modules에 있는 React-scripts 폴더를 삭제하고 낮은 버전을 설치해야 합니다

npm install React-script@1.1.1 - -save

실제로 크로스 도메인 문제는 해결될 수 있지만 프로젝트에서 sass를 사용했는데 하위 버전으로 변경한 후 sass 구문 분석을 지원하지 않습니다. Sass를 지원하려면 node_modules/react-scripts/config에서 구성으로 이동해야 하지만 이렇게 하는 것은 권장되지 않습니다.

3. 최고의 추천

http-proxy-middleware

npm 다운로드 및 http-proxy-middleware --save

Create 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
}
})
)
}

관련 무료 학습 권장사항:

JavaScript

（ 동영상 )

위 내용은 교차 반응 도메인 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!