Как скрыть ключ API в getInitialProps - PullRequest
Новая
       52

Как скрыть ключ API в getInitialProps

0 голосов
/ 27 января 2020

Я пытаюсь подключить мой API-интерфейс к следующему. js Это часть моего кода в индексе. js

const searchHandler = async(event) => {
const (value === '')return;
Router.push({
pathname: '/zdjatka',
query: {value: 'kotek'}});};

, как вы видите, у меня есть несколько параметров запроса. После запуска обработчика веб-сайт переходит на мою zdjatka. js, код ниже, 

Test.getInitialProps = async (context) => {
  const { value } = await context.query
const res = await fetch(`https://stock.adobe.io/Rest/Media/1/Search/Files?locale=pl_PL&search_parameters[words]=${value}
    &search_parameters[limit]=22&search_parameters[offset]=22`, {
          headers: {
            "x-api-key": "....",
            "X-Product": "adobe-api/0.1.0",
            "Content-Type": "application/json"
          }
        })
    const data = await res.json()
    // console.log(photos); 
  return {
data: data
  }
}

Проблема заключается в том, когда я переключаюсь на страницу маршрута zdjatka, api отправляет запрос и chrome Утилиты показывают мой api-ключ в заголовке, но когда я открываю прямо из web-браузера localhost: 3000 / zdjatka без ссылки со страницы индекса, я получаю повторный запрос с данными, ведь в заголовке не было api-ключа. Как добиться того же эффекта, когда я связываюсь с маршрутизатором?

Ответы [ 2 ]

1 голос
/ 27 января 2020

Вам нужно будет добавить next.config.js и добавить его внутрь: 

module.exports = {
  env: {
   apiKey: 'your-api-key',
  },
}

, а затем в вашем getInitialProps вы можете ссылаться на ключ API как process.env.apiKey

0 голосов
/ 29 января 2020

Спасибо за совет, я создаю сервер 

const express = require("express");
const next = require("next");
const fetch = require("node-fetch");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
var bodyParser = require("body-parser");
const handle = app.getRequestHandler();

const cors = require("cors");
app
  .prepare()
  .then(() => {
    const server = express();
    server.use(cors());
    server.use(bodyParser.json());
    server.use(bodyParser.urlencoded({ extended: true }));

    server.post("/api", (request, response) => {
      // console.log(request.body);
      const datas = request.body;
      response.json({
        status: "success",
        local: datas.local,
        searchTerm: datas.searchTerm
      });

      server.get('/zdjatka', async (request, response) => {

        // const ROOT_URL = `https://stock.adobe.io/Rest/Media/1/Search/Files?locale=${data.local}&search_parameters[word]=${data.searchTerm}&search_parameters[limit]=22&search_parameters[offset]=22`;
        const url =
          "https://stock.adobe.io/Rest/Media/1/Search/Files?locale=pl_PL&search_parameters[words]=kotek&search_parameters[limit]=22&search_parameters[offset]=22";
        const fetchData = await fetch(url, {

          headers: {
            "x-api-key": "....",
            "X-Product": "adobe-api/0.1.0",
            "Content-Type": "application/json",
            "Accept": "application/json"
          }
        });
             console.log(response.status);
         const data = await fetchData.json();
        response.json(data);
          console.log(response);    
        console.log(json);           

      })
    });

и запрашиваю со страницы 

 const searchHandler = async (event) => {
// Router.router.push('/zdjatka');
setSearchTerm(event.target.value);
   const data = ({local: "pl_PL",
   searchTerm: searchTerm });

const options = {
     method: "POST",
     headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
      },
     body: JSON.stringify(datas)
    }
     const response = await fetch('/api', options);
     const json = await response.json();
    console.log(json);
 const fetchData = await fetch('/zdjatka', {

     headers: {
     'Content-Type': 'application/json',
    'Accept': 'application/json'
       }
     });

       console.log(response)
     const data = await fetchData.json();
       console.log(data);                      

  }

первая часть, отправляющая запрос на сервер, работает отлично, но я не могу получить ответ от внешнего API. Буду так благодарен за любой совет! как обработать этот ответ на запрос канала через сервер.

Проблема решена, я пропускаю попытку / ловлю.

...