#Billiam-CSP

1 messages · Page 1 of 1 (latest)

tidal root
#

Hi there, it seems like you are getting some CSP errors

rich venture
#

How would I go about solving these errors?

tidal root
#

Billiam-CSP

rich venture
#

And I also seem to be getting some CORS errors

tidal root
#

You should adjust your server configuration if you want to allows CORS.

rich venture
#

Where do I put these drectives?

tidal root
#

It depends on your server setup, maybe you want to check with your backend engineer?

rich venture
#

No backend engineer unfortunately, I'm simply trying to recreate the example on a react app

#

the serve is set up exactly as it is from the docs

tidal root
#

Are you running a development local server or a production server?

rich venture
#

dev local

tidal root
#

Is your webapge also served from localhost ?

rich venture
#

yes

#

client is port 3000 and server is 4242

tidal root
#

Ok, you can add a
"proxy": "http://localhost:4242",
in package.json and run the dev server again

#

This should solves the CORS error

rich venture
#

I still get the same errors

tidal root
#

Did you restart the servers? both 3000 and 4242

rich venture
#

yes i restarted both client and server

tidal root
#

Send me your package.json file

rich venture
#

I get this error in console:
Proxy error: Could not proxy request /_next/webpack-hmr from localhost:3000 to https://localhost:4242/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EPROTO).

#

Here you go:

{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "proxy": "https://localhost:4242/",
  "scripts": {
    "start": "react-scripts start",
    "start2": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6",
    "autoprefixer": "^10.4.8",
    "nodemon": "^2.0.19",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
    "axios": "^0.27.2",
    "express": "^4.18.1",
    "firebase": "^9.9.2",
    "framer": "^2.1.3",
    "framer-motion": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "react-spring": "^9.5.2",
    "react-toastify": "^9.0.8",
    "stripe": "^10.1.0",
    "tailwind-scrollbar-hide": "^1.1.7",
    "tailwindcss-counter": "^1.1.3",
    "web-vitals": "^2.1.4"
  }
}
tidal root
#

remove the trailing slash

#

just https://localhost:4242

rich venture
#

No change, same errors

tidal root
rich venture
#

I will try it out thanks