How to use third party web service in reactjs?

Question

I am working on ReactJs in which i am trying to use third party api. As i tested the api in postman, all the api's are working fine. But when i integrated the api in my project i am getting CORS error. I have searched on the google. I found the solution that use Proxy server. I tried using proxy server but still not working for me. May be I did not implement it correctly. I referred these links :

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

DO i need to install anything? Any help is appreciated.

package.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);                
            }
        );

https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work — Dominic, Apr 02 '20 at 05:29
@Dominic Thank you for your quick response. i have gone through the provided link but didn't work for me. — Priyanka Gupta, Apr 02 '20 at 09:24
You are making a request on the same port and domain though "/token?grant_type=client_credentials" so where is the third part request? — Dominic, Apr 02 '20 at 09:28
its https://api.sysco.com/token?grant_type=client_credentials — Priyanka Gupta, Apr 02 '20 at 09:58
do you want a solution for development or for production too ? — Mohit Singh, Apr 02 '20 at 18:52

score 0 · Accepted Answer · answered Apr 02 '20 at 19:08

If you want a way to do this for development purposes (as some apis don't allow adding localhost or http to allow origin) you can use cors disabled mode of the browsers like for chrome google-chrome --disable-web-security does the trick OR in windows you can create a shortcut (rightclick > send to desktop ) and in its properties(right-click > properties) add the flag --disable-web-security after ***/chrome.exe (you will see a textbox).

If you want a solution for production, there is no other way than configuring the api for your website. You can follow the link provided by Dominic to learn more about cors. All the third pary API uses allow any origin header or atleast give a way to configure cors in console.

How to use third party web service in reactjs?

1 Answers1