Visual Studio, Ripple Emulator and CORS/Cross Domain Ajax

Question

I have an issue with Visual Studio when working on a multi device hybrid app. When I try do to an ajax call to an external webservice, and get some errors in ripple. (Cross Domain Security issues). My code works fine when deploying to a mobile device.

From research I found the following:

• Ripple has its own proxy settings

  • In Ripple, go to settings, and choose local, disabled, or remote (depending on your situation) on the proxy setting.
  • This seemed to work for some people, but I now have a different error. (Bad Request)

• I found more info that Chrome can be started in no web security mode, by means of a command line switch when you run it.

  • The issue with this, is that Visual Studio seems to have hard coded the path to Chrome, that it uses to open ripple.
  • I therefore cant start chrome in no web security mode...

Answer 1

I had exactly the same problem as Louis, but since Chrome 48 all the CORS extensions seem to have stopped working. I've come up with an alternative solution which I thought I'd share.

1. In your Chrome installation directory - probably C:\Program Files (x86)\Google\Chrome\Application - create a shortcut to the chrome.exe
2. Right click on this shortcut and select Properties
3. On the Shortcut tab, in the Target field append the following two fields --allow-file-access-from-files --disable-web-security 4 . Save this and rename the shortcut to "Google Chrome - Debug with Ripple"
4. Right click on it and select Pin to Start Menu

This shortcut will allow you to run Chrome with no web security, which allows CORS in Ripple. By using a shortcut this will not interfere with your normal use of Chrome. Now in order to use Ripple

1. In Visual Studio debug your app which will start Ripple in its own Chrome instance
2. Now open the start menu and click on the pinned "Google Chrome - Debug with Ripple" shortcut
3. A second instance of Chrome will launch with a warning of "You are using an unsupported command-line flag: -- disable-web-security. Stability and security will suffer."
4. Copy the Ripple proxy URL from the Visual Studio instance to this new one, for example http://localhost:4400/index.html?enableripple=cordova-3.0.0-NexusS
5. Your CORS requests will now work in Ripple.

Note that Visual Studio has just been used to launch Ripple. Debugging will need to take place using Chrome's Developer Tools.

Note also that you can double check that Chrome is using your shortcut flags by browsing to the url chrome://version/

Hope this helps!

Answer 2

I got this problem sorted by downloading and installing a chrome extension, that sets the web security setting 'on' and 'off'.

Link for the extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

• Visual studio seems to run a separate/second copy of Chrome.
• You have to install the extension in the Chrome instance that VS opens when it runs Ripple. If you install the extension in your normal Chrome browser, it is not available in the instance that VS uses.
• I then had to set my ripple proxy setting to disabled.
• The call also fails if I just debug in ripple, with the CORS setting already on. I have to physically flip the switch, off, and then on again, every time I debug in ripple, otherwise I get the cross domain issues.

All is good now, life can go on.

Answer 3

As an additional note to disabling Cross Domain Proxy in the Ripple emulator...

If you are calling an API, like Azure Mobile Apps API, dont forget to allow external calls to the API by setting the "Access-Control-Allow-Origin" flag to "any".

In my scenario I am developing an Ionic v1 App using Azure Mobile App as the backend.

In web.config >>

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

</configuration>