How to enable CORS in Mulesoft on application level? - anypoint-studio

Question

I need to enable CORS in Mulesoft on the application level. I already have found some solutions by setting CORS on the listener, but it doesn't work for me. Here is my HTTP listener configuration:
<http:listener-config name="erp-apoteka-api-httpListenerConfig">
<http:listener-connection host="0.0.0.0" port="8081" protocol="HTTPS"/>
<http:listener-interceptors>
<http:cors-interceptor>
<http:origins>
<http:origin url="http://localhost:3000" accessControlMaxAge="30000">
<http:allowed-methods>
<http:method methodName="GET" />
<http:method methodName="POST" />
<http:method methodName="DELETE" />
<http:method methodName="OPTIONS" />
<http:method methodName="PUT" />
</http:allowed-methods>
<http:allowed-headers >
<http:header headerName="Content-Type" />
<http:header headerName="Access-Control-Allow-Headers" />
<http:header headerName="Access-Control-Allow-Origin" />
</http:allowed-headers>
<http:expose-headers />
</http:origin>
</http:origins>
</http:cors-interceptor>
</http:listener-interceptors>
</http:listener-config>
I'm using React and Axios on frontend and when I do some calls, I got this error:
Access to XMLHttpRequest at 'http://localhost:8081/api/kategorije' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
KategorijeContainer.tsx:53 Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)
xhr.js:178 GET http://localhost:8081/api/kategorije net::ERR_FAILED
My axios settings are this:
export const axiosInstance = axios.create({
baseURL: BaseRoutes.ApiUrl,
headers: {
'Content-Type': 'application/json',
},
responseType: 'json',
});

Answer 1

Your http:listener-connection protocol is set to HTTPS but your origin is coming from http://localhost.. I'm assuming you're still in your development phase and have no TLS enabled on your mule backend, try changing it to HTTP.