Lỗi preflight CORS redux & loopback API

Question

Tôi có ứng dụng khách trên react-redux & ứng dụng API trên loopback.

Để thử nghiệm địa phương của tôi Tôi đang chạy ứng dụng client trên cổng 8080 và ứng dụng máy chủ trên cổng 3000.

Khi tôi cố gắng để kiểm tra các OAuth Google (sử dụng loopback-passport component) với các ứng dụng của khách hàng, tôi nhận được dưới đây lỗi.

Khi tôi kiểm tra nó bằng cách sử Postman, không có vấn đề.

Đây là mã phía khách hàng,

require('babel-polyfill'); 
import { CALL_API } from 'redux-api-middleware'; 
import C from '../constants'; 
const API_ROOT = 'http://localhost:3000'; 
function googleLogin() { return async(dispatch) => { 
    const actionResp = await dispatch({ 
     [CALL_API]: { 
     endpoint: API_ROOT + '/auth/google', 
     headers: { 
      'Access-Control-Allow-Credentials': 'false', 
      'Access-Control-Allow-Methods': 'GET', 
      'Access-Control-Allow-Origin': API_ROOT 
     }, 
     method: 'GET', 
     types: ['GET', 'GET_SUCCESS', 'GET_FAILED'] 
     } 
    }); 

    if (actionResp.error) { 
     console.log(actionResp); 
     throw new Error('Some error in communication', actionResp); 
    } else { 
     console.log(actionResp); 
    } 
}; 
} 

thiết lập CORS trong loopback middleware là như dưới đây,

"cors": { 
    "params": { 
     "origin": true, 
     "credentials": false, 
     "maxAge": 86400 
    } 
    } 

này nghe có vẻ như một vấn đề đơn giản, đánh giá cao sự giúp đỡ nào ở đây.

Answer 1

Hầu hết các trình duyệt hiện không hỗ trợ chuyển hướng sau đây cho các yêu cầu được làm trước.

thử điều này trong trường hợp của bạn:

1. Thực hiện một yêu cầu đơn giản để xác định (sử dụng Response.url cho Fetch API, hoặc XHR.responseURL để xác định những URL yêu cầu thực preflighted sẽ kết thúc lên tại).
2. Thực hiện một yêu cầu khác (yêu cầu "thực") bằng URL bạn đã nhận được từ Response.url hoặc XMLHttpRequest.responseURL trong bước đầu tiên.

Cross-Origin Resource Sharing (CORS) - Preflighted requests and redirects