Thread: Dealing with CORS without a web server

Results 1 to 8 of 8
  1. #1 Dealing with CORS without a web server 
    Registered Member
    Join Date
    Dec 2013
    Posts
    419
    Thanks given
    127
    Thanks received
    85
    Rep Power
    349
    Hi guys,

    Not been here for a while

    I have an issue with CORS:
    'home.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    What I am trying to do is load content from a html file into a div.

    The project structure is:

    Code:
    www
    ---- index.html
    ---- home.html
    ---- css
    -------- style.css
    ---- js
    -------- index.js
    The code inside index.html

    Code:
    <div id="page-content"></div>
    		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    		<script>
    		$(document).ready( function() {
    			$("#page-content").load("home.html");
    		});
    		</script>

    The code inside home.html

    Code:
    <h1>Hello</h1>
    I'm expecting index.html to show
    Code:
    <h1>Hello</h1>
    inside the
    Code:
    <div id="page-content"></div>
    Note: I do not have a web server and will not be able to run one so setting headers is not possible?

    Thanks
    Reply With Quote  
     

  2. #2  
    Crafting what has been undiscovered

    Doughiee's Avatar
    Join Date
    Nov 2015
    Posts
    124
    Thanks given
    219
    Thanks received
    192
    Rep Power
    725
    Quote Originally Posted by Kiissmyswagb View Post
    Hi guys,

    Not been here for a while

    I have an issue with CORS:


    What I am trying to do is load content from a html file into a div.

    The project structure is:

    Code:
    www
    ---- index.html
    ---- home.html
    ---- css
    -------- style.css
    ---- js
    -------- index.js
    The code inside index.html

    Code:
    <div id="page-content"></div>
    		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    		<script>
    		$(document).ready( function() {
    			$("#page-content").load("home.html");
    		});
    		</script>

    The code inside home.html

    Code:
    <h1>Hello</h1>
    I'm expecting index.html to show
    Code:
    <h1>Hello</h1>
    inside the
    Code:
    <div id="page-content"></div>
    Note: I do not have a web server and will not be able to run one so setting headers is not possible?

    Thanks
    Try to put #page-content in ' instead of quotation marks ("#page-content" -> '#page-content')
    also, I'm not sure if it also may be that in JS, but, try appending a "./" before home.html
    Last edited by Doughiee; 11-14-2018 at 08:21 PM.
    Reply With Quote  
     

  3. #3  
    Registered Member
    Join Date
    Dec 2013
    Posts
    419
    Thanks given
    127
    Thanks received
    85
    Rep Power
    349
    Quote Originally Posted by Yasin View Post
    Try to put #page-content in ' instead of quotation marks ("#page-content" -> '#page-content')
    also, I'm not sure if it also may be that in JS, but, try appending a "./" before home.html
    It's a CORS issue though...
    Reply With Quote  
     

  4. #4  
    Registered Member
    Join Date
    Sep 2016
    Posts
    13
    Thanks given
    2
    Thanks received
    1
    Rep Power
    11
    CORS is annoying because its enforced by the browser. Also big thing is that .load() is for loading the <script></Script> portion of the html file and executing it so it would never render your <h1>

    Script Execution
    When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

    Here, any JavaScript loaded into #a as a part of the document will successfully execute.

    1
    $( "#a" ).load( "article.html" );
    However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

    1
    $( "#b" ).load( "article.html #target" );
    Additional Notes:
    Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
    Reply With Quote  
     

  5. #5  
    Registered Member

    Join Date
    Sep 2014
    Posts
    2,080
    Thanks given
    3,003
    Thanks received
    1,114
    Rep Power
    5000
    @Chris/Hacker is your guy to ask.
    Reply With Quote  
     

  6. #6  
    Official
    RaddTech LLC's Avatar
    Join Date
    Sep 2010
    Age
    27
    Posts
    418
    Thanks given
    39
    Thanks received
    48
    Rep Power
    36
    The easiest way to do this would be to load the file into a string and use javascript or jquery to set the div content to that string.
    Rise, a MMORPG where you can wager REAL MONEY $$$$

    Coming soon, January 1st, 2019
    http://www.rise-game.com/

    https://www.youtube.com/watch?v=mJ85L3kfUVg

    Spoiler for Dark Rage:
    Attached image
    Reply With Quote  
     

  7. #7  
    Banned

    Join Date
    Nov 2014
    Posts
    611
    Thanks given
    180
    Thanks received
    156
    Rep Power
    0
    Code:
    $.get( "home.html", function( data ) {
      $("#page-content").html("data");
    });
    https://api.jquery.com/jquery.get/
    Reply With Quote  
     

  8. Thankful user:


  9. #8  
    Registered Member
    Join Date
    Dec 2013
    Posts
    419
    Thanks given
    127
    Thanks received
    85
    Rep Power
    349
    Thanks for the answers, I have fixed this by changing my browsers security settings.


    Quote Originally Posted by Developmental View Post
    CORS is annoying because its enforced by the browser. Also big thing is that .load() is for loading the <script></Script> portion of the html file and executing it so it would never render your <h1>
    You're correct - I had to change security settings in my browser to get this working. So I'm all good now

    Quote Originally Posted by RaddTech LLC View Post
    The easiest way to do this would be to load the file into a string and use javascript or jquery to set the div content to that string.
    It's not as simple as that, to "load a file into a string" you'd need to use a XMLHTTPRequest and that'll get blocked by cors.

    Quote Originally Posted by Thrallix View Post
    Code:
    $.get( "home.html", function( data ) {
      $("#page-content").html("data");
    });
    https://api.jquery.com/jquery.get/
    This doesn't work as it uses XMLHTTPRequest, see previous reply.

    As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object.
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. The Best Web Hosting Deals with Free Domain
    By Syed Hosting in forum Hosting
    Replies: 0
    Last Post: 03-27-2011, 05:42 AM
  2. Replies: 4
    Last Post: 02-12-2010, 05:01 AM
  3. Replies: 3
    Last Post: 01-21-2010, 07:02 PM
  4. Replies: 3
    Last Post: 07-03-2008, 10:05 PM
  5. Deal with Rune-Server.
    By ~Legend Rene in forum RS2 Server
    Replies: 34
    Last Post: 11-20-2007, 01:16 AM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •