Cross-domain security restrictions are for the browser side, and there are no cross-domain security restrictions for the server side.
The browser's homology policy restricts the interaction of documents or scripts loaded from one source with resources from another source.
If the protocol, port and host are the same for both pages, then both pages have the same source, otherwise they are different sources.
If you are making cross-domain requests in js, some special processing is required. Alternatively, you can send the request to your own server, make the request through background code, and return the data to the front end.
Here's how jsonp using jquery makes cross-domain requests and how it works.
First, look at the preparation environment: the two ports are different and form conditions for cross-domain requests.
Get data: The port to get data is 9090
Request data: The port for requesting data is 8080
1. First, see what happens if you directly initiate an ajax request
Here is the code for the originating requester:
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: 'http://localhost:9090/student',
type: 'GET',
success: function (data) {
$(text).val(data);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>The results of the request are as follows: You can see that cross-domain requests have been blocked because of the browser's homology policy.
2. Next, let's look at how to initiate cross-domain requests. There are many ways to resolve cross-domain requests. Here's just how jquery uses jsop and how it works.
First of all, we need to understand that it is not possible to directly initiate a cross-domain ajax request on a page, but it is possible to introduce js scripts from different domains on a page, just as you can use the <img src="> tag on your own page to display pictures from a domain at will.
For example, I request a picture of port 9090 on the page of port 8080: you can see that cross-domain requests directly through src are possible.
3. See how to use <script src=""> to complete a cross-domain request:
When you click on the "Get data across domains" button, add a <script>tag to initiate a cross-domain request; note that the request address is followed by a parameter called back=showData;
ShowData is the name of the callback function that is passed to the background to wrap the data. When the data is returned to the front end, it is in the form of showData(result), because it is a script script, the showData function is called automatically, and result is the parameter of showData.
At this point, we've returned data requests across domains, but it's inconvenient to write a script to initiate the request and then write a callback function to process the data.
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
//callback
function showData (result) {
var data = JSON.stringify(result); //json object to string
$("#text").val(data);
}
$(document).ready(function () {
$("#btn").click(function () {
//Enter a script into the header that initiates a cross-domain request
$("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>Server:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//data
List<Student> studentList = getStudentList();
JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//Callback function name passed from front end
String callback = request.getParameter("callback");
//Wrap the return data with the callback function name so that it is passed back as a parameter to the callback function
result = callback + "(" + result + ")";
response.getWriter().write(result);
}Result:
4. Consider jquery's jsonp-style cross-domain request:
The service-side code remains the same, and the js code is as follows: In the simplest way, you can initiate a cross-domain request by configuring only one dataType:'jsonp'. jsonp specifies that the data type returned by the server is in jsonp format, so you can see the path of the request that was originated, automatically with a callback=xxx x, which is a callback function name randomly generated by jquery.
Here success is the same as showData above, where success() is the default callback function if there is a success function.
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //Specify the type of data returned by the server
success: function (data) {
var result = JSON.stringify(data); //json object to string
$("#text").val(result);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>Effect:
Let's see how to specify a specific callback function: Line 30
The callback function can be written under <script> (default belongs to window object) or specified in the window object, look at the jquery source, you can see that when jsonp calls the callback function, it is called window.callback.
Then looking at the result of the call, we find that the parameters that come with the request are: callback=showData; when you call the callback function, you call the specified showData first, and then call success. So success is the function that must be called after you return success, depending on how you write.
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
function showData (data) {
console.info("call showData");
var result = JSON.stringify(data);
$("#text").val(result);
}
$(document).ready(function () {
// window.showData = function (data) {
// console.info("call showData");
//
// var result = JSON.stringify(data);
// $("#text").val(result);
// }
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //Specify the type of data returned by the server
jsonpCallback: "showData", //Specify callback function name
success: function (data) {
console.info("call success");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>Design sketch:
See how to change the name callback again: Line 23
When the name callback is specified, the background also needs to be changed.
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
function showData (data) {
console.info("call showData");
var result = JSON.stringify(data);
$("#text").val(result);
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //Specify the type of data returned by the server
jsonp: "theFunction", //Specify parameter name
jsonpCallback: "showData", //Specify callback function name
success: function (data) {
console.info("call success");
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>Server:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//data
List<Student> studentList = getStudentList();
JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//Callback function name passed from front end
String callback = request.getParameter("theFunction");
//Wrap the return data with the callback function name so that it is passed back as a parameter to the callback function
result = callback + "(" + result + ")";
response.getWriter().write(result);
}Design sketch:
Finally, see if jsonp supports POST: ajax requests to specify POST
You can see that the jsonp method does not support POST-based cross-domain requests, and even if POST is specified, it will automatically change to GET-based requests; however, if the back-end is set to POST-based requests will not work.
Jsonp is implemented in the same way that <script>scripts request addresses, but ajax's jsonp encapsulates it, so it is conceivable that jsonp does not support POST.
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Cross-domain testing</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:9090/student",
type: "POST", //post request mode
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
var result = JSON.stringify(data);
$("#text").val(result);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="Getting data across domains" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>Design sketch:
To add another point, go back to the first one: CORS header is missing "Access-Control-Allow-Origin".
Sometimes you will find that everything else is okay, and this error occurs: This error indicates that the server is denying cross-domain access. If this error occurs, you need to set up on the server to allow cross-domain requests.
response.setHeader("Access-Control-Allow-Origin", "*");Set up to allow cross-domain access for any domain name
Settings can be accessed across domains: line 6 or line 8, one of which is fine.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
// *Indicates that any domain name is allowed cross-domain access
response.setHeader("Access-Control-Allow-Origin", "*");
// Specify a specific domain name to be accessible
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
//data
List<Student> studentList = getStudentList();
JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//Callback function name passed from front end
String callback = request.getParameter("callback");
//Wrap the return data with the callback function name so that it is passed back as a parameter to the callback function
result = callback + "(" + result + ")";
response.getWriter().write(result);
}