“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

1 Same-origin, same-origin policy, and cross-domain

Same-origin indicates that two pages have the same protocol, domain name, and port

The same origin policy is the most basic security feature of browsers. It restricts the behavior of web pages in the case of different sources:

  1. Storage contents such as cookies, LocalStorage, and IndexedDB cannot be read
  2. DOM nodes and JS objects cannot be obtained
  3. After the AJAX request is sent, you cannot get the response back from the server

Cross-domain is when a document or script from one source wants to request resources from another source, but this requirement is blocked due to the same origin policy

2 Cross-domain solution

2.1 the json across domains

Core principle: The SRC attribute of the

Therefore, script tags can be integrated on the server side to return to the client side, and cross-domain access can be realized in the form of JavaScript callback

JSONP is limited to GET requests

2.2 CORS Cross-domain Resource Sharing

CORS is a W3C standard that stands for Cross-Origin Resource Sharing.

It allows browsers to make XMLHttpRequest requests across source servers, overcoming the limitation that AJAX can only be used in the same source

CORS requires both browser and server support

CORS can be divided into simple and non-simple requests

2.3 Nginx Reverse Proxy

Configure a proxy server with Nginx to set a request address with the same origin as the request page, which acts as a springboard for reverse proxy access to the server

3 JSONP handwriting implementation

3.1 What is JSONP

Jsonp (JSON with Padding) is a use of JSON that allows web pages to retrieve data across domains

3.2 What is the principle of JSONP

  1. Because of the same origin policy,AjaxFiles cannot be requested directly across domains
  2. On the pagesrcAttribute tags are not restricted by the same origin policy, that is, have cross-domain capabilities
  3. So we can go throughscriptOf the labelsrcProperty to get a segment from the serverjscode
  4. At the same time, the server can add the data we need to this code (useJSONEncapsulating data)
  5. becauseJSONThis pure character data format can be used to describe complex data succinctly and byjsNative support for easy client parsing and processing.

3.3 Encapsulate a JSONP method

3.3.1 Process of requesting data using JSONP

  1. The JSONP method takes three parameters: URL, data, callback (request address, request parameters, callback function)

  2. The jSONP method first defines the callback function on a global property and gets the function name fn

  3. Create a script tag dynamically

  4. The URL, data, and FN are then stitched together as strings as the SRC property of the script

  5. Rendering a script to a page requests data from the background

  6. After receiving the request, the background will wrap the data required by the client with JSON according to the parsed parameters, and wrap the data with the callback function name, as shown below

    Callback function name (JSON)Copy the code

    Return the string to the client

  7. The client gets js code that calls the callback function fn and takes the resulting JSON data as arguments

  8. This allows you to customize the callback function and process the resulting JSON data in it

3.3.2 Encapsulate your own JSONP method

const jsonp = (url, data, callback) = > {
    let fn = 'cb' + Math.random().toString().replace('. '.' ')
    window[fn] = callback
    let query = ' '
    for (let key in data) {
        query += key + '=' + data[key] + '&'
    }
    const script = document.createElement('script')
    script.src = url +'? ' + query + 'callback=' + fn
    script.onload = () = > {
        document.body.removeChild(script)
    }
    document.body.appendChild(script)
}

jsonp('http://127.0.0.1:8888/getWeather', {}, (res) = > {
    console.log(res);
})
Copy the code