How to enable CORS in Mulesoft on application level?

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.