Enabling CORS with WebAPI

One common problem with WebAPI is when you have cross domain requests coming in and the browser will reject the request since the server does not send the appropriate access control origin header. When testing with localhost and debugging, you may not get this error, but it can appear once you publish your service online and third party developers attempt to use it. To resolve this, you just have to add a custom header into your web.config for it. The custom header is part of httpProtocol in the system.webServer section. Refer to the sample below:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Remember that you cannot have duplicate element sections in your web.config.