/login endpoint is throwing 403 and frontend only the login interface requests from the frontend to the backend?

[gweesin]

I run the frontend and backend program alone(main branch). But the backend postman cannot request successfully, and the frontend cannot display the page correctly.

1. about frontend

this is my frontend package.json(I just delete the proxy field):

{
  "name": "book-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.4.16",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/styles": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "bootstrap": "^5.1.1",
    "graphql": "^15.6.1",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "zxcvbn": "^4.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint . --ext=.ts,.tsx",
    "tsc": "tsc"
  },
  "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": {
    "@types/react-router-dom": "^5.1.7",
    "@types/zxcvbn": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "eslint": "^7.18.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.1-rc.0-next-419ccc2b1-20220217"
  }
}

However, the frontend only the login interface requests from the frontend to the backend. other port of requests is 3000(the frontend port):

Very confused that in addition to the /login interface, all other requests are for port 3000.😭 like this:

2. about backend

I try the discussion843 but also many problems.

// in SecurityConfiguration.java
@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors()
        .and()
        .csrf().disable()
        .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and()
        .addFilter(new JwtUsernamePasswordAuthFilter(authenticationManager(), jwtConfig,
                secretKey))
        .addFilterAfter(new JwtTokenVerifier(secretKey, jwtConfig), JwtUsernamePasswordAuthFilter.class)
        .authorizeRequests()
        .antMatchers(HttpMethod.POST, Mappings.USER).permitAll()
        .anyRequest()
        .authenticated();
}

I just modify the config file(application.properties) like this:

server.port=8082

spring.jpa.hibernate.ddl-auto=validate
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect
spring.datasource.url = jdbc:postgresql://localhost:5432/book_project_db
spring.datasource.username = postgres
spring.datasource.password = 123456

spring.data.rest.base-path=/api

application.jwt.secretKey=4&lTw7H@VWQtYC$3gh9DD9cReS7ehZ&tL9^wq@ODH@#8TCIZuRkcYE2%Qg$3X$!2
application.jwt.tokenPrefix=Bearer 
application.jwt.tokenExpirationAfterDays=7

but see the postman:

Thank you for your willingness to help me!!! 😃

[knjk04]

Hi @C-G-X, you shouldn't need to change anything to get it working. I noticed you changed the database settings. Does it work when you also run the database within a Docker container (and revert back to the database settings we have in the main branch)?

If you don't want to run the database in a Docker container, you'll need to manually create your own Postgres database (which we don't recommend because it's easier to help people out if they're using our setup).

The login endpoint requires the POST verb. See this guide for more information: https://project-books.github.io/development/how-to/backend-postman/

[gweesin]

well, @knjk04, the login request is post. This is my negligence...
The reason why I didn't use docker and set up my own database is that I found that my docker reported an error when it was running, and I didn't know anything about docker before.

So, the postman send request successfully!

But the frontend also can not request successfully(expect /login).

[gweesin]

if i reset the branch to the head of main, yarn install and yarn start, the console we can see:

I think the reason is the proxy field in package.json is not exist.

and the page we can see:

maybe the problem of eslint-plugin-react-hooks version???

[knjk04]

Just to clarify, is this when the branch is exactly the same as main? I know you said before that you deleted the proxy line in package.json, so I just want to make sure

[gweesin]

right, the branch is exactly the same as main.
I install the docker again, now the start up by docker command has the same problem:

Nevertheless, I can still run the web page:

I didn't respond to those parts in the red box. Why? I'm dizzy now😵

[knjk04]

@C-G-X Thanks for bringing up this error, I was able to replicate it locally.

The error is here: https://github.com/Project-Books/book-project/blob/main/frontend/src/shared/http/HttpClient.ts#L40. Even when we correctly indent the ignore comment on the line above (line 39), it still doesn't ignore the use of any. I'm not sure why that is just yet, but we're looking into this!

[igiannopi]

Hey, I would like to start working on this project. However, I am wondering, reading the above comments, would be possible for me to install and run the project?