没有 CORS 或 JSONP 的跨域请求

Question

I know this question has been asked before, but none of the answers have been working for me! I am doing a school project and I would like to get the HTML (to parse it for my project) returned by the dynamic schedule files on my schools server.

The page I would like the HTML of is: https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched

I think that CORS is not enabled for the school server files and I do not know if it supports JSONP...

How do I set up the cross-domain request to get the HTML from this page?

I have tried:

$.ajax({
    type:'POST',
    url: 'https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched',
    headers: {
      'Access-Control-Allow-Origin': '*'
   },
   contentType: 'text/html',
   crossDomain:true
}).done(function( data ) {

});

and I get the error:

XMLHttpRequest cannot load https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 501.

When I add:

dataType:'jsonp'

I get the error:

GET https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched?callback=jQuery21108736664191819727_1416964243449&_=1416964243450 400 (Bad Request) jquery.min.js:4send jquery.min.js:4n.extend.ajax jquery.min.js:4(anonymous function)

Any help is greatly appreciated!

Answer 1

Browsers enforce "same-origin" access control unless the site explicitly allows cross origin requests (either via CORS or JSONP). So, if the site you are trying to access does not allow cross origin requests, then you cannot get the data directly from the site using only a browser. The browser is enforcing the same origin restrictions requested by the target site.

This is NOT security for a server at all as there are many ways around it. It only applies to one specific type of access from a browser (though that one specific type of access protection is useful).

This means to get the data into a browser you will need to use some sort of third party agent (other than the browser) that can get the data for you. The two most common ways of doing that are:

1. Your own server. You make a request of your own server to get some content from some other server. Your server then fetches the data from the other server and returns it to you in the browser.

2. A proxy server. There are some preconfigured proxy servers that are built just for doing what is described in option #1. You can either use a proxy service or install your own proxy server to do this for you or configure your own web server to have this capability.

So, you can't bypass cross origin restrictions from a cooperating browser. But, you can bypass them from a server. This is because CORs restrictions are implemented only in the browser. They aren't a server-enforced restriction. The browser asks the target server what CORs policies are in play and enforces them in the browser only. Some other server making a request to that server does not need to pay any attention to CORs policies.

Answer 2

I know how frustrating it will be when technical limitations makes life more harder.

For the situation like this, you can try the Javascript library: Xdomain
You can check the reference article for the same here: http://hayageek.com/cross-domain-ajax-jquery-without-cors/
The YCombinator discussion may help, if you have issues: https://news.ycombinator.com/item?id=8023844

Other way is, use your server to get the HTML page, and push to your application as and when required. Something like this. Assume you have added one iframe as 'my_external_content.php' . The code should be

<?php

    $externalURL = "http://otherdomain.com";

    // requires fopen wrappers
    $externalData = file_get_contents($externalURL);

    echo $externalData;
?>

Please refer the other question on SO for some reference: Ways to Circumvent Same Origin Policy

Hope this helps your or others who are in same situation.