Visual Studio, Ripple Emulator and CORS / Cross Domain Ajax

Question

I have a problem with Visual Studio when working with a hybrid application with multiple devices. When I try to make an ajax call to an external web service and get some errors in the ruffle. (Cross-security issues). My code works great when deployed to a mobile device.

From the study, I found the following:

• Ripple has its own proxy settings

  • In Ripple, go to the settings and select the local, disconnected or remote (depending on your situation) proxy settings.
  • It seemed to work for some people, but now I have a different mistake. (Invalid request)

• I found more information that Chrome can be run in non-web security mode using the command line at startup.

  • The problem with this is that Visual Studio seems to have hard-coded the path to Chrome, which is used to open ripples.
  • Therefore, I cannot run chrome in Internet security mode ...

Answer 1

I had exactly the same problem as Louis, but since Chrome 48 all CORS extensions seemed to stop working. I came up with an alternative solution that I thought I would share.

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

This shortcut allows you to run Chrome without web security, which allows CORS in Ripple. Using a shortcut will not interfere with the normal use of Chrome. Now to use ripple

• Visual Studio is debugging your application that runs Ripple on its own Chrome instance.
• Now open the Start menu and click on the attached shortcut "Google Chrome - Pulsed Debugging"
• The second instance of Chrome will start with the warning "You are using an unsupported command line flag: - disable-web-security. Stability and security will suffer."
• Copy the Ripple proxy URL from the Visual Studio instance to a new one, for example http: // localhost: 4400 / index.html? Enableripple = cordova-3.0.0-NexusS
• Your CORS requests will now work in Ripple.

Note that Visual Studio has just been used to run Ripple. Debugging should be done using the Chrome developer tools.

Note that you can double-check that Chrome uses your shortcut shortcuts by looking at the chrome: // version / URL

Hope this helps!

Answer 2

I am having a problem with downloading and installing the chrome extension, which sets the web security setting to 'on' and 'off'.

Extension link: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

• Visual Studio seems to be launching a separate / second copy of Chrome.
• You need to install the extension in the Chrome instance that VS opens when Ripple starts. If you install the extension in your regular Chrome browser, it is not available in the instance that uses VS.
• Then I had to turn off the proxy setting.
• The call also fails if I just debug the ripple, with the CORS setting already on. I have to physically flip the switch, turn it off, and then again, every time I debug the ripple, otherwise I get cross domain problems.

Now everything is fine, life can go on.

Answer 3

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

If you are calling an API, such as the Azure Mobile Apps API, be sure to allow external API calls by setting the "Access-Control-Allow-Origin" flag to "any".

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

In web.config →

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