reactjs Visual Studio Code -使用反向代理进行BFF身份验证时React-TypeScript应用程序中的未绑定断点

5w9g7ksd  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(165)

我有一个React应用程序,一个YARP代理和一个.NET API。
入口点是我的代理中的https://localhost:5005,它将我重定向到我的身份验证提供程序并返回到我的前端。
React应用程序运行在http://localhost:3000上,当使用以下启动配置时,断点得到绑定

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Edge against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

但是我无法登录到我的身份验证提供程序。当使用https://localhost:5005从VSCode启动chrome时,断点被消息We couldn't find a corresponding source location, and didn't find any source with the name App.tsx解除绑定
我的tsconfig.json看起来像这样:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es2016",
    "module": "commonjs",
    "baseUrl": "src",
    "sourceMap": true, 
    "outDir": "out",
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true 
  },
  "include": [
    "src"
  ]
}

我试着加上

"sourceMapPathOverrides": {
                "*": "${workspaceFolder}/src/*"
            }

以及

"outFiles": [
                "${workspaceFolder}/out/",
            ],            
            "sourceMaps": true,
            "pathMapping": {
                //"url": "webpack://athenaeum",
                "path": "${workspaceFolder}/src/client"
            }

但两个选择都没有改变什么。

jdgnovmf

jdgnovmf1#

这可能是源Map配置问题。由于您使用的是YARP代理,它会重定向到端口5005,因此您需要确保应用生成的源Map与浏览器请求的源文件匹配。因此,通过检查“out”目录来检查源Map是否正确生成,并确保为所有源文件生成了源Map。同时确保服务器正确提供源Map。

相关问题