How to use third party web service in reactjs? - 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);
}
);

Answer 1

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.