[js] browser's homology policy and cross domain request

Keywords: Javascript

Homology strategy:

What is homology strategy?

  • Homology policy is a requirement (constraint) on network security given by the browser

  • It is agreed that the addresses of the requesting party and the target party must ensure that the domain name and port number of the transmission protocol are completely consistent

  • When you're sending a request

  • If the full address of the open page and the full address of the receiving server

    =>As long as the transmission protocol or domain name or port number is different

    =>It is called triggering the homology strategy

    =>After you trigger the same origin policy, the browser does not allow you to obtain the data returned to you by the server

Homology: the transport protocol is exactly the same as the domain name and port number

Non homologous: the transport protocol is different from any one of the domain name and port number

Cross domain request:

  • When a request triggers a homology policy

  • And we also need to request data from non homologous servers

  • We call a request that triggers a homology policy a cross domain request

Common solutions for cross domain requests:

1. jsonp

Implementation of jsonp:

  • Use the src attribute of the script tag to request a non homologous server address

  • Requirement: the content given by the server must be a legal and executable js code

  • Requirement: the js code given by the server needs to be in the format of 'function name (data)'

script tag:

  • A label that introduces an external file
  • The meaning of this tag is that all the imported content will be executed as js code by default
  • Meaning of script tag:
    =>Is to import an external file
    =>Whatever the file name and suffix is
    =>Just read the contents of this file
    =>The read content is executed as js code

src attribute:

  • Function: label the connection path of introducing an external resource
  • characteristic:
    =>SRC attribute is an attribute given by W3C standard to introduce external resources
    =>The browser does not care whether the content introduced by src is cross domain or not through the external address introduced by src attribute
    =>Therefore, it is not affected by the browser homology policy

    jsonp technology is a cross domain approach that has nothing to do with ajax technology
    • Using script tags and src attributes
    • Using the script tag will execute the requested content as js code
    • Using src attribute is not affected by homology strategy
    • Requirement: the returned string from the backend must be a legal js format string

2. CORS (cross domain resource sharing)

  • A cross domain request scheme that has nothing to do with the front end

  • Front end: how to send ajax requests

  • Enable cors configuration from the backend

Back end enable cors configuration

  // Cross domain
  // Tell the browser here, don't worry, I'm willing to give him data
  // Tell the browser which domain names can request me
  // Indicates the allowed domain name, * indicates universal configuration
  header("Access-Control-Allow-Origin: *");
  // CORS
  // Tell the browser which request methods are allowed
  header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
  // Tell the browser what additional request header information is allowed
  echo 'hello world';

3. Proxy

  • Proxy mode cross domain: any server can set and configure the proxy

  • apache server

    =>Proxy http request address free

    =>The proxy https request address requires a certificate

  • nginx server

    =>Proxy http and https are free

    =>Note: the request path must be in English without Chinese characters

To configure an agent with a skin:

  1. Open the small leather panel
 => Take the server from apache Switch to nginx
  1. Open the small leather panel
 => Click settings in the left sidebar

 => Click profile

 => Select to vhosts.conf file

 => Click 0 localhost_8080
  1. Found closed parentheses for server
 => On the previous line of closed parentheses, Write code configuration

 location /xx {
   proxy_pass You requested a cross domain address;


 /xx: You wrote it casually, It's called a proxy identifier

 proxy_pass Back address, Is the cross domain address when you request
  1. Be sure to restart the server

front end:

const xhr = new XMLHttpRequest()

// Note: when you send a request, the request address must directly write the proxy identifier
// In this way, the server will find that you are requesting a proxy identifier. I have indeed configured it
// nginx will help you forward the request to the proxy_ The address configured by pass
xhr.open('GET', '/xhl')

xhr.onload = function () {


Back end:

  echo 'hello world';

reference resources:
Browser's same origin policy and cross domain request_ Learning Edition

Posted by vMan on Tue, 12 Oct 2021 12:39:06 -0700