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...
[Solved] Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource. Solution 1: Access-Control-Allow-Origin is a response header - so in order to enable CORS - We need to add this header to the response from server.
Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.
CORS Should Always Be Handled From Server Side! set the request's mode to 'no-cors' to fetch the resource with CORS disabled. It states that there's a missing Access-Control-Allow-Origin header on the resource you requested. If you think about it, your client doesn't have anything to do with CORS.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With