CORS Problem - preflightMissingAllowOriginHeader - Express Gateway and Axios

Question

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:

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...

Why do you need to implement CORS on both the Express service and on Express Gateway? — James McLeod, Apr 15 '21 at 01:26
@JamesMcLeod I dont need... I just did that to see if it works.. — Jota, Apr 15 '21 at 12:03
Not sure if this is the same issue but I had a very similar problem and it turned out my proxy wasn't allowing OPTIONS requests to the API that I was trying to access. Allowing OPTIONS fixed it for me. — adamgy, Apr 23 '21 at 22:37
I agree with adamgy, I have seen failures like this when failing to provide OPTIONS http method. — duppydodah, Apr 29 '21 at 04:37
if it worked using Postman, i suggest log complete request from Postman including headers and analyze what does Postman add differently (especially in headers) from how you are making the request. — Hamza Rashid, Apr 29 '21 at 09:21

score 5 · Answer 1 · answered Apr 29 '21 at 14:14

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

CORS Problem - preflightMissingAllowOriginHeader - Express Gateway and Axios

1 Answers1