Cross domain problems with WSO2 API Manager

Question

We have develop some APIs for a client and we have published them through API Manager. We have provided the client with some code examples on PHP which work fine. The only problem is that they are using those APIs through AJAX in a different domain to the one associated with AM. Is this a cross domain problem?

I have tried setting the apache server in front of API Manager with the following headers, so that cross domain is allowed

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization, Content-Type, Accept
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
Access-Control-Allow-Origin: * 

But even with these headers, I still get a 401 Unauthorizaed when making calls to AM. I have tried making the requests directly to AM without going through Apache (port 8282) but we still get the same problem.

Answer 1

Yes this is a cross domain problem. I would suggest you to try out below.

Is your API allowed for 'OPTIONS' verb in None Auth Type? [1]To verify that send a curl request to API with out OAuth headers. If you are getting a 200 OK response with CORS headers which you have mentioned then that should be fine. ex:

curl -v -X OPTIONS http://localhost:8280/testapi

If it is not returning a success message, then your backend might be not supporting OPTIONS method. You can verify that by directly sending an OPTIONS request to your backend service. Either you can enable OPTIONS in your backend service or avoid the OPTIONS call reaching the backend by modifying the API synapse configuration.

ex:-

<api name="admin--TestAPI" context="/test" version="1.0" version-type="url">
        <resource methods="POST GET OPTIONS DELETE PUT" url-mapping="/*">
            <inSequence>
                <filter source="get-property('axis2', 'HTTP_METHOD')" regex="OPTIONS">
                    <then>
                        <log level="custom">
                            <property name="Message" value="Received OPTIONS call, sending back headers"/>
                        </log>
                        <property name="Access-Control-Request-Headers" value="authorization,content-type" scope="transport"/>
                        <property name="Access-Control-Allow-Headers" value="authorization,Access-Control-Allow-Origin,Content-Type" scope="transport"/>
                        <property name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" scope="transport"/>
                        <property name="Access-Control-Allow-Origin" value="*" scope="transport"/>
                        <property name="RESPONSE" value="true" scope="default" type="STRING"/>
                        <header name="To" action="remove"/>
                        <send/>
                    </then>
                    <else>
                        <property name="POST_TO_URI" value="true" scope="axis2"/>
                        <filter source="$ctx:AM_KEY_TYPE" regex="PRODUCTION">
                            <then>
                                <send>
                                    <endpoint name="admin--StudentAPI_APIEndpoint_0">
                                        <address uri="http://localhost:8080/sample/1.0/one/">
                                            <timeout>
                                                <duration>30000</duration>
                                                <responseAction>fault</responseAction>
                                            </timeout>
                                            <suspendOnFailure>
                                                <errorCodes>-1</errorCodes>
                                                <initialDuration>0</initialDuration>
                                                <progressionFactor>1.0</progressionFactor>
                                                <maximumDuration>0</maximumDuration>
                                            </suspendOnFailure>
                                            <markForSuspension>
                                                <errorCodes>-1</errorCodes>
                                            </markForSuspension>
                                        </address>
                                    </endpoint>
                                </send>
                            </then>
                            <else>
                                <sequence key="_sandbox_key_error_"/>
                            </else>
                        </filter>
                    </else>
                </filter>
            </inSequence>
            <outSequence>
                <send/>
            </outSequence>
        </resource>
        <handlers>
            <handler class="org.wso2.carbon.apimgt.gateway.handlers.security.APIAuthenticationHandler"/>
            <handler class="org.wso2.carbon.apimgt.gateway.handlers.throttling.APIThrottleHandler">
                <property name="id" value="A"/>
                <property name="policyKey" value="gov:/apimgt/applicationdata/tiers.xml"/>
            </handler>
            <handler class="org.wso2.carbon.apimgt.usage.publisher.APIMgtUsageHandler"/>
            <handler class="org.wso2.carbon.apimgt.usage.publisher.APIMgtGoogleAnalyticsTrackingHandler"/>
            <handler class="org.wso2.carbon.apimgt.gateway.handlers.ext.APIManagerExtensionHandler"/>
        </handlers>
    </api>

Then add Access-Control-Allow-Origin as well to the list of Access-Control-Allow-Headers and keep the other headers as it is.

ex: Access-Control-Allow-Headers: authorization,Access-Control-Allow-Origin,Content-Type

If you are still getting the error, can you provide the detailed error message or the sample PHP client code?

[1]http://docs.wso2.org/display/AM160/Adding+Documentation+Using+Swagger