Выполнение запросов CORS API с помощью create-реагировать-app и webpack - без экспресс

Question

Я пытаюсь делать вызовы API, не отключая CORS в моем браузере.Приложение было создано с использованием response-create-app.Он использует webpack и webpackDevServer для dev.Все ответы, которые я нашел здесь, говорят о том, чтобы вставить следующий код в мой файл webpack.config

devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
  }

Однако я пробовал его в разных местах, и он не работает.

Я продолжаю получать сообщение об ошибке Failed to load resource: the server responded with a status of 500 () и Failed to load ... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

Я также пытался изменить свои вызовы с вызовов Axios для получения вызовов

return fetch(process.env.REACT_APP_API_URL + "/prod/user", {
    mode: 'no-cors',
    credentials: 'include',
    method: "GET",
    headers: {
        "x-api-key": process.env.REACT_APP_API_KEY
    }
})
.then(response => {
   return response.json()
})
.then(resp => dispatch(receiveUsers(resp.data)))
.catch(error => {console.log(error)})

Это привело меняближе, но консоль теперь возвращается

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}

Как мне обойти эту проблему CORS?Заранее благодарим за помощь!

Заголовки ответа / запроса

Answer 1

Тот факт, что вы видите ответ 500 на предварительный запрос OPTIONS, заставляет меня думать, что, возможно, метод запроса OPTIONS просто не разрешен веб-сервером.

Многие веб-серверы по умолчанию разрешают только HEAD, GET и POST, так что это будет первое, что я проверю.

Если это не поможет, убедитесь, что приведенный выше код webpack.config выполняется для всех запросов (т. Е. Для OPTIONS и GET / POST).

Если это не поможет, опубликуйте полный набор заголовков запросов и ответов как в OPTIONS, так и в запросе GET, и давайте посмотрим, куда мы пойдем.

Answer 2

лучший вариант - использовать прокси, особенно если вы используете внешние API или несколько API. Просто установите proxy-middleware и создайте файл src/setupProxy.js, и внутри файла вы можете добавить подобный код к этому:

const proxy = require('proxy-middleware');

module.exports = app => {
  // setup proxies
  // 1st api
  app.use("/etherscan", "http://api.etherscan.io/api");
  // 2nd api
  app.use("/cryptocompare", "https://min-api.cryptocompare.com/data");

  // also it's better to use .env variables
  const {REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL} = process.env;
  app.use(REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL);      
};

И для вашего API также лучше, если вы можете получить базовый URL из переменных .env, например:

const {REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL} = process.env;
const baseURL = REACT_APP_API_ETHERSCAN_PROXY || REACT_APP_API_ETHERSCAN_BASE_URL;

Дополнительный совет: вместо того чтобы продолжать передавать process.env.REACT_APP_API_URL и заголовки для каждого вызова API, вы можете взглянуть на axios , где вы можете создать экземпляр API со свойствами по умолчанию, например:

const {
  REACT_APP_API_ETHERSCAN_PROXY, 
  REACT_APP_API_ETHERSCAN_BASE_URL,
  REACT_APP_API_TIMEOUT,
  REACT_APP_API_ETHERSCAN_KEY
} = process.env;

export const etherscanAPI = axios.create({
  "baseURL": REACT_APP_API_ETHERSCAN_PROXY || REACT_APP_API_ETHERSCAN_BASE_URL,
  "timeout": parseInt(REACT_APP_API_TIMEOUT),
  "headers": {
    "X-Requested-With": "XMLHttpRequest"
  },
  "params": {
    "apiKey": REACT_APP_API_ETHERSCAN_KEY
  }
});

, затем etherscanAPI.get("/whatever")

Answer 3

Невозможно добавить комментарий, поэтому я добавлю его в качестве ответа.

Если вы пытаетесь получить доступ к API, обслуживаемому другим приложением узла или с другого хоста.Вы можете настроить webpack-dev-server для прокси, который запрашивает реальный сервер.

Для получения дополнительной информации проверьте Создать документацию React App: запросы прокси API в разработке .