React Ajax Request는 CORS 오류를 발생 시키지만 데이터를 반환합니다.

Question

POSTMAN을 통해 정상적으로 작동하는 GET 요청을하려고하는데 반응이없는 것 같습니다.

CORS 오류가 발생 했음에도 불구하고 어떤 이유로 데이터를 반환합니다. 어떻게 고칠 수 있습니까?

API 페이로드 :

하는 index.js (돌아 오는 설정)

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import App from './App'; 

import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import ReduxPromise from 'redux-promise'; 
import thunk from 'redux-thunk'; 

import createHistory from 'history/createBrowserHistory' 
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux' 

import {assumeRole} from './libs/awsLib'; 

import './index.css'; 

import reducers from './reducers'; 
import {LOGIN, LOGOUT} from "./actions/UsersActions"; 
import {api} from "./actions/api"; 

const history = createHistory(); 
const myRouterMiddleware = routerMiddleware(history); 

const createStoreWithMiddleware = applyMiddleware(ReduxPromise, thunk, myRouterMiddleware)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <ConnectedRouter history={history}> 
     <App /> 
    </ConnectedRouter> 
    </Provider>, 
    document.getElementById('root') 
); 

FileListReducer

import {GET_DOCUMENTS} from "../actions/index"; 

export default function(state = [], action) { 
    //reducers should return a new object, never mutate the current state 

    switch (action.type) { 
     case GET_DOCUMENTS: 
      return action.payload; 
    } 

    return state; 
} 

FilesActions

import 'whatwg-fetch' 
import {api} from './api'; 
import config from '../config.js'; 

export const GET_DOCUMENTS = 'GET_DOCUMENTS'; 

export function getDocuments() { 
    return (dispatch) => { 
     const request = api.fetch('warpig/document/?userId='+localStorage.getItem("id")).then((res) => { 
      dispatch({ 
       type: GET_DOCUMENTS, 
       payload: {data: res, success: res.status == 200} 
      }) 
     }, (err, data) => { 
      console.log(err, data); 
     }); 
    } 
} 

내 방법은 getDocuments()를 호출하는

... 

    componentDidMount() { 
     this.getDocuments(); 
    } 

    getPrograms() { 
     this.props.fetchPrograms(); 
    } 
... 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ fetchPrograms, uploads3, login, assignToken, getDocuments }, dispatch); 
} 

function mapStateToProps({ programs, fileUpload, auth, filesList }) { 
    return { programs, fileUpload, auth, filesList }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(FileUpload) 

주요 질문은 그 POSTMAN를 통해 작동하지만 반응, 그것을에도 불구하고 반환 데이터를 통해 브라우저에서 HTTP GET 요청을 할 때 작동하지 않는, 그래서되고, 그게 뭐야?

Answer 1

CORS 때문에 POSTMAN과 함께 작동하지만 브라우저에서는 작동하지 않습니다. 이 문제를 해결하려면 "access-control-allow-origin"헤더에 *가 포함되거나 웹 사이트의 도메인 이름이 포함되도록 데이터로 응답해야합니다.

또한 예, CORS가 브라우저, 서버 단주고 조언에 의해 시행되는이 question