通過從laravel路由反應獲取資料

我在使用的 laravel 應用程式中實作了以下功能Laravel Framework 8.83.16：

    public function checkIdentifier($physicalItem_identifier)
    {
        try {
            $con = "mysql";

            $res = DB::connection($con)->table('identifiers')
                ->select('*')
            ->where('physicalItem_identifier', '=', $physicalItem_identifier)
            ->where('available', '=', TRUE)
            ->get();

            if ($res->count()) {
                return response()->json(['exists' => true],200);
            } else {
                return response()->json(['exists' => false], 200);
            }
        } catch (\Exception $e) {
            Log::error($e);
            return response()->json(['exists' => 'error'],200);
        }
    }

我的路線如下所示：

Route::get('v1/checkIdentifier/{physicalItem_identifier}', [ItemController::class,'checkIdentifier']);

以下網址適用于我的 laravel 應用程式：

http://localhost/project/public/v1/checkIdentifier/testIdentifier

對于我正在使用的反應應用程式：

{
  "name": "react-app",
  "version": "1.0",
  "private": true,
  "dependencies": {
    "babel-eslint": "10.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^6.3.0",
    "react-scripts": "3.2.0",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.0.1",
    "web3": "^1.6.1",
    "web3-eth-contract": "^1.5.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24"
  }
}

我創建了以下函式來檢查識別符號是否存在：

import { Routes, Route, useParams } from "react-router-dom";

function MintComponent() {

  const { identifierUrl } = useParams();

  const getData = async () => {
      let url = "http://localhost/project/public/v1/checkIdentifier/"   identifierUrl;

    try {
      const response = await fetch(url);
      const data = await response.json();
      // enter you logic when the fetch is successful
      console.log(data);
    } catch (error) {
      // enter your logic for when there is an error (ex. error toast)
      console.log(error);
    }
    
    ...
  };

當上述功能在我的反應應用程式中運行時，我得到：

'TypeError: Failed to fetch\n    at getData (http://localhost:3000/static/js/main.chunk.js:210:32)\n    at onClick (http://localhost:3000/static/js/main.chunk.js:295:7)\n    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:77068:18)\n    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/1.chunk.js:77117:20)\n    at invokeGuardedCallback (http://localhost:3000/static/js/1.chunk.js:77177:35)\n    at invokeGuardedCallbackAndCatchFirstError (http://localhost…1.chunk.js:79176:7)\n    at dispatchEvent (http://localhost:3000/static/js/1.chunk.js:79094:23)\n    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:116209:16)\n    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:84474:14)\n    at discreteUpdates$1 (http://localhost:3000/static/js/1.chunk.js:95396:18)\n    at discreteUpdates (http://localhost:3000/static/js/1.chunk.js:76878:16)\n    at dispatchDiscreteEvent (http://localhost:3000/static/js/1.chunk.js:79060:7)'

我還檢查了網路選項卡，它似乎是一個CORS錯誤：

react-app有什么建議為什么 fetch在我的本地機器上對我不起作用？

感謝您的回復！

uj5u.com熱心網友回復：

作為 CORS 錯誤的快速修復，您可以Access-Control-Allow-Origin在回傳回應時附加標頭：

return response()->json(['exists' => true],200)->header('Access-Control-Allow-Origin', 'http://localhost:3000');

更徹底的解決方案是使用 CORS 中間件，例如在這篇文章中（只是不要將值設定為*）。

標籤：javascript 反应 拉拉维尔

上一篇：節點AxiosPOST在嵌套資料物件上拋出500錯誤，但適用于平面物件

下一篇：為什么不呼叫document.onload？