heroku 我收到空白页后,我已经部署了我的应用程序

8yparm6h  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(150)

我需要帮助我的React应用程序。在完成我在React中开发的应用程序后,由于性能问题,我决定使用Vite内部。
当我构建并尝试预览时,所有集成在我的本地环境中运行良好,但由于部署在Heroku上,我有一个空白页,有人帮助我。
前端:

"scripts": {
        "start": "serve -s build",
        "dev": "vite",
        "build": "tsc && vite build",
        "test": "vite test",
        "eject": "vite eject",
        "preview": "vite preview"
    }

字符串
后端:

"scripts": {
        "data:import": "ts-node ./src/models/seeder.model.ts",
        "data:destroy": "ts-node src/models/seeder.model.ts -d",
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node dist/server.js",
        "postinstall": "tsc ",
        "tsc": "./node_modules/typescript/bin/tsc",
        "watch-node": "nodemon dist/server.js",
        "server": "nodemon ./src/server.ts ",
        "client": "npm start --prefix fa-shop",
        "watch-ts": "tsc -w",
        "deploy": "git add . && git commit -m Heroku && git push heroku main",
        "heroku-postbuild": " npm install --prefix fa-shop && npm run build --prefix fa-shop",
        "dev": "concurrently \"npm run server\" \"npm run client \" "
    }


和文件夹是这样组织的

appBackend --
           -- node_modules/backend
           -- frondend
                      --- node_modules/frontend


图像来源:Heroku

x3naxklr

x3naxklr1#

最后我解决了这个问题,问题是与核心策略(cors())和内容安全策略(CSP),我做了一些更新,在我的vite文件太

proxy: {
  '/api': {
    target: `https://fashopapp-c129f80f4143.herokuapp.com`,
    changeOrigin: true,
    secure: false,
    ws: true,
  },
},
hmr: { overlay: false }

字符串
然后在我的服务器文件中添加这个配置的cors包

app.use(
  cors({
    origin: 'https://fashopapp-c129f80f4143.herokuapp.com/ ',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Authorization', 'Content-Type'],
    maxAge: 86400,
  })
)


和CSP

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "style-src-elem 'self'"
  )
  next()
})


我认为这对某人有帮助。

相关问题