Lấy yêu cầu GET với tiêu đề tùy chỉnh ReactJS

Question

Tôi đang cố gắng gửi yêu cầu GET đến API nhưng khi tôi thêm tiêu đề tùy chỉnh vào mã, mọi thứ lạ sẽ xảy ra. Một nơi nào đó phương pháp yêu cầu thay đổi thành OPTIONS khi nó đến máy chủ web.

Nhưng khi tôi làm như vậy mà không có tiêu đề, nó sẽ là loại GET. Khi tôi sử dụng trình đăng ký ứng dụng (công cụ phát triển API), yêu cầu hoạt động tốt!

đang yêu cầu:

let token = this.generateClientToken(privateKey, message); 
 

 
    let myheaders = { 
 
     "appID": appID, 
 
     "authorizationkey": token 
 
    } 
 

 
    fetch('http://localhost:8080/api/app/postman', { 
 
     method: "GET", 
 
     // body: JSON.stringify(''), 
 
     headers: myheaders 
 
    }).then(function(response) { 
 
     console.log(response.status);  //=> number 100–599 
 
     console.log(response.statusText); //=> String 
 
     console.log(response.headers); //=> Headers 
 
     console.log(response.url);  //=> String 
 

 
     return response.text() 
 
    }, function(error) { 
 
     console.log(error.message); //=> String 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Server đăng nhập ouput (với tiêu đề):

worker_1 | 172.18.0.4 - 17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403 
web_1  | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-" 

sản lượng Server đăng nhập (không có tiêu đề):

worker_1 | 172.18.0.4 - 17/Mar/2017:16:01:49 +0000 "GET /index.php" 403 
web_1  | 172.18.0.1 - - [17/Mar/2017:16:01:49 +0000] "GET /api/app/postman HTTP/1.1" 403 5 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-" 

thêm các module NPM cho lấy hỗ trợ trong các trình duyệt thêm:
https://github.com/github/fetch#obtaining-the-response-url
https://github.com/taylorhakes/promise-polyfill

gì am i thiếu ở đây? Tất cả đều đúng với tôi.

Tôi đang sử dụng phiên bản phát triển firefox để kiểm tra các ứng dụng Reactjs bằng cách chạy nó với NPM bắt đầu

Answer 1

Bạn có muốn cài đặt cors NPM gói https://www.npmjs.com/package/cors trên máy chủ, nơi bạn có http://localhost:8080/api/app Node của bạn ứng dụng đang chạy.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests có chi tiết về những gì đang xảy ra ở đây: appID và authorizationkey tiêu đề yêu cầu của bạn được kích hoạt trình duyệt của bạn để gửi một CORS preflight OPTIONS yêu cầu trước khi gửi GET.

Xử lý rằng OPTIONS yêu cầu, bạn có thể cài đặt gói NPM cors và làm theo hướng dẫn tại https://www.npmjs.com/package/cors#enabling-cors-pre-flight để cấu hình nó:

var express = require('express') 
    , cors = require('cors') 
    , app = express(); 
app.options('*', cors()); // include before other routes 
app.listen(80, function(){ 
    console.log('CORS-enabled web server listening on port 80'); 
}); 

Answer 2

Các chấp nhận câu trả lời trò chơi cho tôi những giải pháp, tôi không sử dụng một backend nodeJS nhưng đồng bằng Nginx với php-fpm. Tuy nhiên, câu trả lời giải thích cách yêu cầu với tiêu đề tùy chỉnh đầu tiên luôn thực hiện yêu cầu OPTIONS để xác minh việc chấp nhận tên tiêu đề đã đặt, vì vậy tôi phải thay đổi phản hồi trong máy chủ web để cung cấp mã 204 với quyền te tiêu đề bao gồm. mà không có nó sẽ nhấn mã PHP của tôi, nơi xác thực sẽ thất bại và dẫn đến một mã 403 vì sự vắng mặt của các tiêu đề với nội dung và phương pháp yêu cầu được sử dụng.

Đây là những gì tôi thêm vào các máy chủ Nginx để làm cho nó làm việc:

location ~ \.php$ { 
      add_header 'Access-Control-Allow-Origin' "*"; 
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'; 
      add_header 'Access-Control-Allow-Headers' 'appID,authorizationkey'; 

      if ($request_method = 'OPTIONS') { 
       return 204; 
      } 
} 

Tôi biết rằng nó xa hoàn hảo nhưng bây giờ nó đã làm cho nó làm việc. và một lần nữa cảm ơn đã chỉ cho tôi đi đúng hướng.