Как использовать сторонний веб-сервис в reactjs? - PullRequest
0 голосов
/ 02 апреля 2020

Я работаю над ReactJs, в котором я пытаюсь использовать сторонние API. Когда я тестировал API в почтальоне, все API работают нормально. Но когда я интегрировал API в свой проект, я получаю ошибку CORS. Я искал в Google. Я нашел решение, которое использует прокси-сервер. Я пытался использовать прокси-сервер, но все еще не работает для меня. Может быть, я не реализовал это правильно. Я ссылался на эти ссылки:

https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/

https://levelup.gitconnected.com/overview-of-proxy-server-and-how-we-use-them-in-react-bf67c062b929

Нужно ли что-либо устанавливать? Любая помощь приветствуется.

пакет. json

{
  "name": "WebPortal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 8081 --hot --host localhost",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.9.0",
    "@mdi/font": "^4.9.95",
    "babel-loader": "^7.1.5",
    "bootstrap": "^4.4.1",
    "bootstrap4-toggle": "^3.6.1",
    "jquery": "^3.4.1",
    "pm2": "^4.2.3",
    "popper.js": "^1.16.1",
    "react": "^16.12.0",
    "react-bootstrap-toggle": "^2.3.2",
    "react-datetime-picker": "^2.9.0",
    "react-dom": "^16.12.0",
    "react-easy-crop": "^2.0.1",
    "react-image-crop": "^8.5.0",
    "react-loader-spinner": "^3.1.5",
    "react-router-dom": "^5.1.2",
    "react-toasts": "^3.0.6",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.30.0"
  },
  "proxy": "api.sysco.com"
}

temp.js
 fetch('/token?grant_type=client_credentials', {method: 'POST'}).then(
            data => {                
                console.log("data==========>", data);
            },
            error => {
                console.log("error==========>", error);                
            }
        );

1 Ответ

0 голосов
/ 02 апреля 2020

Если вам нужен способ сделать это для целей разработки (так как некоторые API-интерфейсы не позволяют добавлять localhost или http для разрешения источника), вы можете использовать режим отключения cors в браузерах, как для chrome google-chrome --disable-web-security. ИЛИ в windows вы можете создать ярлык (щелкнуть правой кнопкой мыши> отправить на рабочий стол) и в его свойствах (щелкнуть правой кнопкой мыши> свойства) добавить флаг --disable-web-security после *** / chrome .exe (вы увидите текстовое поле ).

Если вы хотите решение для производства, нет другого способа, кроме настройки API для вашего сайта. Вы можете перейти по ссылке, предоставленной Domini c, чтобы узнать больше о cors. Все третье использование API разрешает любой заголовок источника или, по крайней мере, дает возможность настроить cors в консоли.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...