1
저는 ReactJS를 처음 사용했습니다.응답을 구문 분석 할 수없는 인증 및 액세스 토큰에 대한 패치가있는 Reactj
Chrome 브라우저를 사용하고 있습니다.
ReactJS를 사용하여 로그인 페이지를 만들려고합니다. 이 페이지는 사용자 아이디와 비밀번호로 간단합니다. SSO 서버에서 인증이 발생합니다. 즉, fetch 호출을 사용하여 서버에 데이터를 게시하고 access_token을 응답으로 받아야합니다.
문제는 다음과 같습니다 : 콘솔에서
내가지고 있지 않다 응답. 그러나 개발자 도구의 네트워크 탭을 보면 access_token을 비롯한 모든 필수 입력란에 유효한 응답이 있음을 알 수 있습니다. 이제 이것을 어떻게 파싱해야합니까?
fetch은 비동기 호출이기 때문에입니까?
여기 내 전체 페이지 코드입니다.
피씨 : 일부 코드가 포맷되지 않습니다. Unexpected end of input :
import React, {Component} from 'react';
import '../App/App.css';
import {FormGroup, FormControl, InputGroup} from 'react-bootstrap';
class Auth extends Component {
constructor(props) {
super(props);
this.state = {
userid: '',
password: '',
accessToken: ''
}
}
submit() {
console.log('state', this.state);
const BASE_URL = 'MY SSO URL';
const params = {
'grant_type': 'password',
'username': this.state.userid,
'password': this.state.password,
'client_secret': 'secred',
'client_id': 'client_id',
};
const formData = new FormData();
for (let p in params) {
formData.append(p, params[p]);
}
const headers = {
'Access-Control-Allow-Origin': '*'
};
const request = {
method: 'POST',
headers: headers,
body: formData,
mode: 'no-cors'
};
fetch(BASE_URL, request)
.then((response) => response.text())
.then((responseText) => {
console.log('text',responseText);
})
.catch((error) => {
console.warn(error);
});
console.log('all done');
}
render() {
return (
<div className="login">
<div className="legend">Signin</div>
<FormGroup>
<InputGroup>
<div className="input">
<FormControl
type="text"
placeholder="Enter User Id or email"
onChange={event => this.setState({userid: event.target.value})}
onKeyPress={
event => {
if (event.key === 'Enter') {
this.submit()
}
}}
/>
</div>
<div className="input">
<FormControl
type="password"
placeholder="enter password"
onChange={event => {
console.log(event.target.value)
this.setState({password: event.target.value})
}}
onKeyPress={
event => {
if (event.key === 'Enter') {
this.submit()
}
}}
/>
</div>
<FormControl
type="submit"
onClick={() => this.submit()}
/>
</InputGroup>
</FormGroup>
</div>
)
}
}
export default Auth;
response.json()을 시도했다.
mode: 'no-cors'
가 제거 :
고마워요. 당신은 no-cors와 헤더 'Access-Control-Allow-Origin'의 사용면에서 '*'이고, 사용하지 않으면 오류가 발생합니다. 하지만 내 컬 명령은 문제가 없으므로 아무런 문제가 없으므로 프런트 엔드 코드에서 빠져있는 부분이 조금 혼란 스럽습니다. – artofabhishek
헤더와 no-cors를 제거하면 얻을 수 있습니다 "No 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 존재합니다. 'http : // localhost : 3000'은 액세스가 허용되지 않습니다. 불투명 한 응답이 사용자의 요구에 부합하고 요청 모드를 'no-cors'로 설정하여 CORS를 비활성화 한 상태에서 리소스를 가져 오지 만 문제가되지는 않습니다. – artofabhishek
그래, 문제는 BASE_URL 서버가 Access Control-Allow-Origin 응답 헤더. 더 긴 설명을 추가하기 위해 위의 대답을 업데이트했습니다. 컬링에서 작동하는 이유는 컬링이 Access-Control-Allow-Origin 응답 헤더를 찾았는지 여부에 따라 동작을 변경하지 않기 때문입니다. Control-Allow-Origin 응답 헤더. 그러나 브라우저는 허용합니다. – sideshowbarker