npm start,yarn start 오류 (React proxy관련)

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

options.allowedHosts[0] should be a non-empty string

 

https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

 

나의 경우는 그냥 별게 아니었다.

 

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "aos": "^2.3.4",
    "axios": "^0.25.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.1",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "5",
    "react-scripts": "5.0.0",
    "react-transition-group": "^4.4.2",
    "redux": "^4.1.2",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "https://localhost:8443/",
  "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"
    ]
  }
}

 

위에서

 

"proxy": "https://localhost:8443/",

이부분만 지워주니까 해결이 됬음, 팀원중에 한명이 추가한거같은데 이유는..아직모르겠다!

 

---

좀더 근본 문제해결

 

proxy를 써야한다면..?? react에서  cors같은 문제때문에 proxy를 써야할때 두가지 방법이 있다.

 

1.package.json에 추가한다

해당 페이지에 아래와같은식으로

"proxy": "http://localhost:4000",

 

 

2.새로 만들어준파일에 추가를한다. (src/setupProxy.js)

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Proxying API Requests in Development | Create React App

해당 페이지에 전부 나와있다.

 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

이와같이 setupProxy.js를 만들어주고 이와같이 해주는방법도 있다. 나와같은경우에는

 

아래같이 설정해주니까 문제도 해결되고 , 프록시설정까지 해줄 수 있게 되었다.

 

 

- 참고한페이지

 

https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

https://velog.io/@tw4204/React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%EC%9D%98-CORS%EB%A5%BC-%EC%9C%84%ED%95%9C-proxy-%EC%84%A4%EC%A0%95