Test Cross-Origin Requests

index.html

<div id="header">
  <h2>Test Cross-Origin Requests</h2>
</div>

<div id="content">
    <select id="method">
        <option value="get">GET</option>
        <option value="post">POST</option>
        <option value="put">PUT</option>
    </select>
    <input type="button" value="Try it" onclick="SJL.CrossOrigin.sendRequest()" />
    <span id='value1'>(Result)</span>
</div>

<div id="footer">
  <br/>
  <a href="http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api" target="_blank">Enabling Cross-Origin Requests in ASP.NET Web API</a>
  <br/>
  <br/>
<div>

script.js

namespace = function (ns_string, obj) {
  var parts = ns_string.split('.'), parent = window, pl, i;
  for (i = 0, pl = parts.length; i < pl; i++) {
    parent = parent[parts[i]] = parent[parts[i]] || (i == pl - 1 && obj ? (typeof obj == 'function' ? (obj() || {}) : obj) : {});
  }
  return parent;
};

namespace("SJL.CrossOrigin", function () {
  var self = {};
  
  // Change this to your URL...
  var serviceUrl = 'http://localhost:5169/api/rssnewspod'; 

  // Called from the button, see HTML.
  self.sendRequest = function() {
    var method = $('#method').val();
    $.ajax({
      type: method,
      url: serviceUrl
    }).done(function (data) {
      $('#value1').text(data);
    }).error(function (jqXHR, textStatus, errorThrown) {
      $('#value1').text(jqXHR.responseText || textStatus);
    });
  }
  
  return self;
});

style.css

div {
  border-style: solid;
  border-width: 1px;
}

.hide {
  border-style: none;
  display:none;
}

.show {
  border-style: none;
  display:block;
}

Test Cross-Origin Requests.markdown

Test Cross-Origin Requests ('-' * 26) ...Using CORS, a server can explicitly allow some cross-origin requests while rejecting others. CORS is safer and more flexible than earlier techniques such as JSONP...

A Pen by Siôn J. Lewis on CodePen.

License.