Cross origin requests are only supported
Question
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. 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?
4 answers
solution1
7 ACCPTED 2016-08-23 15:13:34
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>
solution2
1 2016-08-23 15:06:23
Do you use Chrome and opened the html-script from your filesystem?
Firefox or a webserver shoud fix this cross origin Problem.
solution3
1 2016-11-18 16:05:09
href="javascript:void(0);"
is causing it
solution4
0 2018-11-03 08:27:37
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.