CORS Problem - preflightMissingAllowOriginHeader - Express Gateway and Axios

28.3k Views Asked by At

I'm tyring to use Express Gateway + AXIOS (react) + Express, but I'm receiving the CORS Erro, I already did many thing but nothing worked.

The error is this: enter image description here

Cross-Origin Resource Sharing error: PreflightMissingAllowOriginHeader

My EXPRESS is like this:

const corsOptions = {
    origin: '*',
    methods: ['POST', 'GET', 'PATCH', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization']
}
app.use(cors(corsOptions));

My EXPRESS-GATEWAY:

http:
  port: 8080
admin:
  port: 9876
  host: localhost
apiEndpoints:
  api:
    host: "localhost"
    paths: 
      - '/api/B/*'
      - '/api/A/*'
serviceEndpoints:
  appname:
    urls: 
      - 'http://localhost:8000'
policies:
  - jwt
  - cors
  - expression
  - log
  - proxy
  - rate-limit
pipelines:
  default:
    apiEndpoints:
      - api
    policies:
      - cors:
          - action:
              origin: ["*"]
              methods: [ "HEAD", "PUT", "PATCH", "POST", "GET", "DELETE" ]
              credentials: true
              allowedHeaders: ['Content-type','Authorization','Origin','Access-Control-Allow-Origin','Accept','Options','X-Requested-With']
      - jwt:
          - action:
              secretOrPublicKey: code
              checkCredentialExistence: false
      - proxy:
          - action:
              serviceEndpoint: appname
              changeOrigin: true

My AXIOS:

const headers = {
  headers: {
    "Authorization": authToken,
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true
  },
}

axios.get(`${API_PRIVATE_URL}/user/profile`, {
  crossdomain: true
}, {
  withCredentials: true
}, headers)

I don't know what to do anymore. Can someone help me ?

I already went in several posts but nothing worked..

edit: It didn't go to controller neither. edit2: I can use with POSTMAN, and it worked as expected...

1

There are 1 best solutions below

0
On

Add "OPTIONS" after "DELETE" in your lists of permitted methods in express/express-gateway.

const corsOptions = {
    origin: '*',
    methods: ['POST', 'GET', 'PATCH', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
}
app.use(cors(corsOptions));

http:
  port: 8080
admin:
  port: 9876
  host: localhost
apiEndpoints:
  api:
    host: "localhost"
    paths: 
      - '/api/B/*'
      - '/api/A/*'
serviceEndpoints:
  appname:
    urls: 
      - 'http://localhost:8000'
policies:
  - jwt
  - cors
  - expression
  - log
  - proxy
  - rate-limit
pipelines:
  default:
    apiEndpoints:
      - api
    policies:
      - cors:
          - action:
              origin: ["*"]
              methods: [ "HEAD", "PUT", "PATCH", "POST", "GET", "DELETE", "OPTIONS" ]
              credentials: true
              allowedHeaders: ['Content-type','Authorization','Origin','Access-Control-Allow-Origin','Accept','Options','X-Requested-With']
      - jwt:
          - action:
              secretOrPublicKey: code
              checkCredentialExistence: false
      - proxy:
          - action:
              serviceEndpoint: appname
              changeOrigin: true