Rails Kitchen

It's a place to write on stuff I learned recently.

Two Ways to Avoid Cross-origin Resource Sharing Issue in Development Environment

| Comments

When you are developing a Front End Application using Backbone.js, Angular.js or any other MV* frameworks or making an AJAX call, you might have faced the issue with Cross-origin resource sharing (CORS). You will face this issue if you are accessing the hosted web services (API) from your development environment because the domains are different.

We can solve the CORS issue in different ways. The best solution is to implement reverse proxy in the development environment. Here is a sample virtual host file which has reverse proxy implemented: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<VirtualHost *:80> 
    ServerName front_end_app.eshaiju-desktop.com 
    DocumentRoot /home/eshaiju/Projects/front_end_app/public 
    <Directory /home/eshaiju/Projects/front_end_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 http://eshaiju.in/api 
    ProxyPassReverse /api http://eshaiju.in/api 
             
ErrorLog /var/log/apache2/error.log 
               
# Possible values include: debug, info, notice, warn, error, crit, 
# alert, emerg. 
LogLevel warn 
     
CustomLog /var/log/apache2/access.log combined 
</VirtualHost>
From your app if you start accessing the /api URL it will be accessed from the proxy URL.

There is anohter simple way to avoid this security check in developement environment. Disable cross-domain security check for AJAX call in Google Chrome for deveopment environment.
Start Google Chrome with no security from command line, OSX: 
1

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security
Start Google Chrome from command line, Ubuntu/Linux: 
1

google-chrome --disable-web-security
Start Chromium from command line, Ubuntu/Linux: 
1

chromium-browser --disable-web-security
For Windows:
1 - Create a shortcut to Chrome on your desktop.
2 - Right-click on the shortcut and choose Properties, then switch to “Shortcut” tab. In the “Target” field, append the following: –args –disable-web-security.
3 - Restart Chrome

After this chrome will open with all securty disabled. So AJAX call will work without any problem.

Comments