Sự cố Axios CORS với Github oauth Không nhận mã thông báo truy cập

Question

Tôi đã tạo 2 tuyến đường trên ứng dụng React-Redux của mình. Tôi đã thêm cài đặt ứng dụng github với trang chủ và URL gọi lại.

1. Khi bạn nhấn tuyến đường này: https://reduxapp.herokuapp.com/signin Bạn click vào nút đăng nhập Github, ==>githubGeturi

2. Github chuyển hướng trở lại với một mã https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1 và githubSendCode ('9536286a59228e7784a1 ') hành động được kích hoạt

Bạn có thể thấy trong cuộc gọi mạng OPTIONS gọi đi qua, nhưng POST cuộc gọi không bao giờ xảy ra. và bạn nhận được một lỗi giao diện điều khiển:

XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=32b70bf671e04762b26c&…_secret=5851623d94887db7612d4c9bc689310b9d53284b&code=9536286a59228e7784a1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://reduxapp.herokuapp.com' is therefore not allowed access. 

Dưới đây là các chức năng hành động của tôi:

const CLIENT_ID = '32b70bf671e04762b26c'; 
const CLIENT_SECRET = '5851623d94887db7612d4c9bc689310b9d53284b'; 
const ROOT_URL = window.location.origin; 
const REDIRECT_URL = `${ROOT_URL}/auth/callback`; 
const AUTHORIZE_URL = 'https://github.com/login/oauth/authorize'; 
const ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token'; 
const STATE = _.random(10000); 

export function githubGeturi() { 
    const GITHUB_URL = `${AUTHORIZE_URL}?client_id=${CLIENT_ID}&scope=user,public_repo&redirect_uri=${REDIRECT_URL}`; 

    return (dispatch) => dispatch(signinUrl(GITHUB_URL)); 
} 

export function githubSendCode(code) { 
    const GITHUB_URL = `${ACCESS_TOKEN_URL}?client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}&code=${code}`; 

    axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; 
    const axiosPost = axios.post(
    GITHUB_URL, 
    { 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded', 
     'Accept': 'text/json' 
    } 
    }); 

    return (dispatch) => { 
    dispatch(signinRequest()); 
    return axiosPost 
     .then(
     success => dispatch(signinSuccess(success)), 
     error => dispatch(signinError(error)) 
    ); 
    }; 
} 

======== Cách duy nhất có thể, tôi tìm thấy là thực hiện cuộc gọi POST với máy chủ . Bạn có thể xem toàn bộ giải pháp ở đây: https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91

Answer 1

Nó có vẻ như bạn không thể thực hiện cuộc gọi đến mà điểm cuối qua JavaScript

https://github.com/isaacs/github/issues/330

On ví dụ của bạn tôi thấy rằng OPTIONS gọi phương thức thất bại, và điều này là do các trục làm điều đó khi bạn thêm các tiêu đề phụ để yêu cầu, nhưng cuộc gọi POST cũng không thành công.

Bạn có thể thiết lập proxy giữa ứng dụng và github trên máy chủ của mình, thao tác này chỉ đơn giản chuyển tiếp các yêu cầu và trả lời của bạn có phản hồi.