JSONP solves ajax cross-origin problems

JSONP solves ajax cross-origin problems
If you use ajax to request requests under the B domain name under the domain name, an error similar to this will be reported: No 'access-Control-Allow-origin' header is present on the requested resource. add the following attribute to the response header: response. setHeader ("Access-Control-Allow-Origin", "*"); can solve the problem, but it is said that there are security problems... then we can solve the problem by using jsonp. The following is a transfer article: How does JSONP work? My exploration of this problem comes from one requirement: when accessing a page, I need to report the access information to another website. In fact, sending a cross-origin request can roughly meet this requirement. Cross-Domain sending examples are very common, such as requesting a third-party image, introducing a third-party style file, and introducing a js file on the cdn. Then, when it comes to sending requests, in this web era, we naturally think of Ajax requests. Unfortunately, considering the security issue, that is, the so-called same-source security policy, it is forbidden by the browser to request a third-party address using ajax. However, a technology called JSONP solves this problem. Speaking of JSONP, most people may only know about it in jQuery. jQuery provides a method to send a jsonp request. For example. when Using ajax (): copy the code // Using YQL and JSONP $. ajax ({url: "http://query.yahooapis.com/v1/public/yql", // the name of the callback parameter, as specified by the YQL service jsonp: "callback", // tell jQuery we're expecting JSONPdataType: "jsonp", // tell YQL what we want and that we want JSONdata: {q: "select title, abstract, url from search. news where query = \ "cat \" ", format:" json "}, // work with th E responsesuccess: function (response) {console. log (response); // server response}); copy the code jQuery to encapsulate the jsonp request into a format similar to the ajax request, which makes it easier for developers to use it, but in fact, jsonp is not implemented through XMLHttpRequest at all. A simple JSONP request can be implemented using the following code: copy the code var callbackName = 'iamthecallback'; window [callbackName] = function (uuu, vvv, www) {// perform subsequent processing on the returned data} var script = document. createElement ('script'); script. src = 'HTTP: // melon. github. io/xxx/yyy? Callback = '+ callbackName; document. body. appendChild (script); copy the code, which is part of the front-end code. to truly implement the JSONP function, you also need backend cooperation. For the above example, when the front-end requests this script address, the backend will have a magical effect as long as it responds according to the following content: iAmTheCallback ('abc', 'def ', 'ghi'); many people may have suddenly realized it. The JSONP name sounds like high-end. In fact, this is also the case when jQuery sends a JSONP request. You can see it here. References: So how does JSONP really work? Working with JSONPjquery/src/ajax/script. js