1. Same-origin policy

  • Source: defined by the URL scheme (protocol), host (domain name), and port. Protocol + Domain name + port

  • The same origin policy is defined by the browser. If the JS runs in source A, it can only obtain data from source A, but not from source B. That is, cross-domain is not allowed.

  • Same-origin: Two urls are considered to be same-origin only when their protocols, domain names, and port numbers are consistent.

2. Cross-origin

Cross-domain/cross-source differences should only be translation differences.

  • Cross-domain: when the protocol, domain name, or port of a URL request is different from the current PAGE URL, it is cross-domain.

3. CORS

  • CORS: Cross-origin Resource Sharing Cross-domain Resource Sharing

    • When two sources from different sources access each other’s data, the accessed sources need to be declared in advance in the response header of the accessed source, telling the browser which sources are accessible to it. (i.e. the server to specify which hosts can load resources from the server)

    • Specific use ACAO

      Sets the access-Control-Allow-Origin attribute for the response header.

      • Only fromfoo.exampleAccess to the

        Access – Control – Allow – Origin: foo. Example

      • Allows arbitrary outdomain access

        Access-Control-Allow-Origin: *

    • Disadvantages: Compatibility issues, this method is not supported by IE9.

4. JSONP

  • JSONP: JSON with Padding

    • Usage scenarios

      When you cross domains, because the current browser does not support CORS or for some other reason, you must use another method to cross domains. We then request a JS file using the SRC of the script tag. The js file executes a callback that contains our data. Callback names can be formed randomly, passed as callback arguments to the background, and returned as function execution.

    • Advantages: Compatible with IE; It can cross domains;

    • Disadvantages: Due to the use of script tags, it can not read as accurate as Ajax state (status code, response header), only understand the success and failure of the request; Only GET requests can be sent. Post is not supported.

  • To encapsulate the json

    The following code runs on the client side

    function jsonp(url){
    return new Promise((resolve, reject) = >{ // Use Promise encapsulation
        const callback = 'callbackName' + Math.random() // Generate random callback names to avoid duplication
        window[callback] = data= >{ // This function hangs on the window object
            resolve(data)
        }
        const script = document.createElement('script') // Create a script element
        script.src = `${url}? callback=${callback}` // SRC property, the script to request, and pass the callback function name as a query parameter
        script.onload = () = >{
            script.remove() // The label is removed after the request succeeds
        }
        script.onerror = () = >{
            reject() // Reject is executed on failure
        }
        document.body.appendChild(script) // Insert the script tag into the document
    })
}

jsonp('http://xxx.com/yy.js').then(res= >console.log(res),err= >console.log(err))
Copy the code

    When the server receives the request, it returns the following script:

    window[callback](data)
Copy the code

    Callback is the query parameter requested by the client, and data is the data provided by the server to the client.

    Summary:

    1. The general process is

      • The client provides a callback function name
      • The client dynamically adds script elements to make cross-domain requests and provides the callback function name as a query parameter
      • The server returns a string of JS code that invokes the client-side callback function, which receives arguments for the data it wants to transfer.
      • After the client completes the cross-domain request, the callback function is invoked to process the data.

    2. The client is ready and needs the server to trigger the call, but most importantly the data returned.