Two Ways to Avoid Cross-Origin Resource Sharing Issues in Development Environment

When you are developing a front-end application using Backbone.js, Angular.js, or any other MV* framework, you might have encountered issues with Cross-Origin Resource Sharing (CORS). This happens when accessing hosted web services (APIs) from your development environment because the domains are different.

1. Reverse Proxy

The best solution is to implement a reverse proxy. Here is a sample Apache virtual host configuration:

<VirtualHost *:80>
    ServerName front_end_app.local
    DocumentRoot /path/to/app/public

    <Directory /path/to/app/public>
       AllowOverride all
       Options -MultiViews
    </Directory>

    LoadModule proxy_module modules/mod_proxy.so
    ProxyRequests Off

    <Proxy *>
      Order deny,allow
      Allow from all
    </Proxy>

    ProxyPass /api https://api.production-server.com/api
    ProxyPassReverse /api https://api.production-server.com/api
</VirtualHost>

2. Disable Browser Security (Development only)

A simpler way is to disable cross-domain security checks in Google Chrome during development.

OSX:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"

Ubuntu/Linux:

google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"

Windows:

1. Create a shortcut to Chrome on your desktop.
2. Right-click on the shortcut -> Properties -> Shortcut tab.
3. In the "Target" field, append: --disable-web-security --user-data-dir="C:/tmp/chrome_dev"

Note: Always use a separate user data directory when disabling security.