The following error was reported when writing some page request data.

Failed to load https://… :

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://127.0.0.1:7070’ is therefore not allowed access.

After understanding the cause, that is due to cross-domain request caused by cross-domain and the same origin policy related knowledge, wrote a demo to play

Talk a little bit about cross-domains

To understand cross-domain, it is necessary to understand the browser same-origin policy, and here are some great summaries

What is the same origin policy?

The Same Origin Policy (SOP) is a convention introduced by Netscape into the browser in 1995. It is the core and most basic security function of the browser. Without the Same Origin policy, the browser is vulnerable to XSS and CSFR attacks. Same-origin means that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin.

The same origin policy restricts the following behaviors:

Cookie, LocalStorage, and IndexDB cannot be read.DOM and Js objects cannot be obtained.AJAX requests cannot be sentCopy the code

Assuming that there is no same-origin policy, my cookie under website A can be obtained by any website. Then the owner of this website can use my cookie(that is, my identity) to operate under website A. The same origin policy is the cornerstone of web front-end security. Without the same origin policy, there is no security in the browser.

The same-origin policy imposes strict restrictions, but in real scenarios, there are many places where the same-origin policy restrictions need to be broken, which is also known as cross-domain. There are many ways to cross domains (jSONP cross domain, CORS cross domain resource sharing, reverse proxy, etc.).

Use JSONP across domains

Because of the same origin policy, web pages located at server1.example.com generally cannot communicate with servers other than Server1.example.com, with the exception of HTML

The sample code

function handleResponse(response) {
   alert(`You get the data : ${response}`)
}
const script = document.createElement('script')
script.src = 'http://somesite.com/json/?callback=handleResponse'
document.body.insertBefore(script, document.body.firstChild)
Copy the code

The callback function here is important because the script tag added dynamically in the body can share a global scope with other JS files under the HTML file using the loaded file. That is, the <scritp> tag loads resources that can be used by functions in the global scope!

Play around and write a Baidu search box

Baidu had a foreign exposure data interface: sp0.baidu.com/5a1Fazu8AA5…

Open the Baidu home page in Chrome, which can be found in developer tools at NetkworkWe can use it directly, with JSONP can achieve cross-domain access to the input box content related hot data and click the jump, see Github project source code for specific implementation

Implementation effect:The page structure is very simple, as shown below:

Jsonp cross-domain implementation code

  document.onkeyup = function () {
    var val = text.value
    var script = document.createElement('script')
    script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`;
    document.body.appendChild(script)
  }
  function dosomething (data) {
    var oUl = document.querySelector('#lists ul')
    oUl.innerHTML = ''
    data.s.map(function (html) {
      var oLi =  document.createElement('li')
      oLi.innerHTML = html
      oLi.onclick = function () {
        window.location.href = `http://www.baidu.com/s?wd=${html}`
      }
      oUl.appendChild(oLi)
    })
}
Copy the code

Just a simple small demo using JSONP to achieve cross-domain, easy for beginners like me to learn, other structure and style files are not listed, you can download my complete project to view the complete project address: Github:baidu_demo

Reference article:

  1. Common Cross-domain solutions at the front end (full)
  2. JSONP and CORS implement cross-source requests
  3. Never learn AJAX again! (3) Cross-domain access to resources
  4. Jsonp cross-domain request details – from complex to simple