时间戳

首页 > 解决方案 > 如何在 reactjs 中使用第三方 Web 服务？

reactjs - 如何在 reactjs 中使用第三方 Web 服务？

问题描述

我正在尝试使用第三方 api 的 ReactJs。当我在邮递员中测试 api 时，所有 api 都工作正常。但是当我将 api 集成到我的项目中时，我收到了 CORS 错误。我在谷歌上搜索过。我找到了使用代理服务器的解决方案。我尝试使用代理服务器，但仍然无法为我工作。可能是我没有正确实现它。我提到了这些链接：

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

标签： reactjsecmascript-6cors

解决方案

如果您想要一种用于开发目的的方法（因为某些 api 不允许添加 localhost 或 http 以允许来源），您可以使用浏览器的 cors 禁用模式，例如 chrome google-chrome --disable-web-security就可以了，或者在 Windows 中您可以创建一个快捷方式（右键单击 > 发送到桌面）并在其属性中（右键单击 > 属性）--disable-web-security在 ***/chrome.exe 之后添加标志（您将看到一个文本框）。

如果您想要生产解决方案，除了为您的网站配置 api 之外别无他法。您可以点击 Dominic 提供的链接了解更多关于 cors 的信息。所有第三方API使用都允许任何原始标头或至少提供一种在控制台中配置 cors 的方法。

推荐阅读