Display content of another website on my page using jquery without using iframe in Rails

Question

I have made a webpage on my site which will be embedded on another site using jquery. I have to provide jquery code so as when we hit the url from some another site in which my webpage is embedded , my contents of are loaded on page load. I cannot use iframe . I have used .html , .load , .ajax but they always through the error

XMLHttpRequest cannot load http://mypage.com/index?user_id=82. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localserver:port' is therefore not allowed access.

Is there a problem with mypage settings

I have checked these:

$('#siteloader').load('http://mypage.com/index?user_id=82');
$("#siteloader").html('<object data="http://mypage.com/index?user_id=82">');

Please suggest

Answer 1

Thanks guys @Rory McCrossan @Mohammed ElSayed This is how I enabled CORS settings in Rails 4 Inside my application_controller

after_filter :cors_set_access_control_headers

def cors_set_access_control_headers
 headers['Access-Control-Allow-Origin'] = '*'
 headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
 headers['Access-Control-Request-Method'] = '*'
 headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
end

Answer 2

the error message is not actually an error, it's by design so no one can load others content without proper permission.

you will need to enable CORS requests for the website that you are calling.

for IIS7:

consider the following snippet (web.config)

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

Apache server (.htaccess):

Header set Access-Control-Allow-Origin "*"

checkout this link for more information: http://enable-cors.org/server.html