Menu
When I click the link in the code bellow:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<div id="modal_open" class="modal fade" role="document">
<div class="modal-dialog custom-modal-size">
<div class="modal-content">
text
</div>
</div>
</div>
<a href="javascript:void(0);" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>
I get a jquery.min.js:4 XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. message if I have open the chrome debugger. While the code works as expected, I am trying to understand why I get this message. Can someone please explain?
236
Just change the url to http://localhost instead of localhost . If you open the html file from local, you should create a local server to serve that html file, the simplest way is using Web Server for Chrome . That will fix the issue. Save this answer.
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
Simply activate the add-on and perform the request. CORS or Cross-Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.
Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.
You can set href to # and onclick to event.preventDefault() or return false to achieve same thing like this
<a href="#" onclick="return false;" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>
OR
<a href="#" onclick="event.preventDefault()" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>
In your link tag you have href="javascript:void(0);" which is throwing the error. If you remove that, the error is gone.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<div id="modal_open" class="modal fade" role="document">
<div class="modal-dialog custom-modal-size">
<div class="modal-content">
text
</div>
</div>
</div>
<a data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>href="javascript:void(0);"
is causing it
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
