This is the 8th day of my participation in the August More Text Challenge, for more details: August more Text Challenge!

Before getting familiar with cross-domain, let’s familiarize ourselves with the same-origin policy.

The same-origin policy

The same origin policy is an important security policy that restricts how an Origin document or the scripts it loads can interact with resources from another source. It can help block malicious documents and reduce the number of vectors that can be attacked. – MDN

Two urls are cognate if their protocol, port (en-us) (if specified), and host are the same. This scheme is also known as a “protocol/host/port tuple”, or simply “tuple”. (” tuple “refers to the whole of a group of items, in the general form of double/triple/quadruple/quintuple/etc.).

The following table gives the comparing with the URL http://store.company.com/dir/page.html source example:

The same domain name, the same protocol, the same port. Js cross-domain here refers to data transmission or communication between different domains through JS, such as requesting data from a different domain with Ajax, or obtaining data from the framework of different domains (IFrame) in the page through JS.

Cross domain definition

Different sources are cross-domain

Cross-domain refers to requesting resources from the web page of one domain name to another domain name. For example, request resources from www.google.com from the www.baidu.com page. However, this is generally not possible because it is caused by the same origin policy of the browser, a security restriction that the browser imposes on JavaScript. A strict definition of cross-domain is that any difference in protocol, domain name, or port is considered cross-domain

Why do browsers restrict cross-domain access?

Security issues: If a web page has arbitrary access to another site’s resources, security issues can occur without the customer’s knowledge

Why cross domains?

If there are security issues, why cross domains? Sometimes an enterprise has multiple subdomains, such as location.company.com, and the application is located at App.company.com. In this case, resources to access location.company.com from App.company.com are cross-domain.

Cross-domain Solutions (emphasis)

A lot of big guys have done a detailed introduction of the scheme, I will not say, interested in in-depth understanding of the search one by one.

  1. Cross domains via JSONP
  2. Document.domain + iframe cross domain
  3. location.hash + iframe
  4. Window. name + iframe cross domain
  5. PostMessage cross-domain
  6. Cross-domain Resource Sharing (CORS)
  7. Nginx agents cross domains
  8. Nodejs middleware proxies cross domains
  9. The WebSocket protocol is cross-domain

As an added bonus, a Webpack-built project can use devServer

Configuration:

Proxy: {'/login ': {target:' http://10.28.152.63:3660/tphh/login ', changeOrigin: true, // needed for virtual hosted sites ws: false, // proxy websockets pathRewrite: {/ / pathRewrite said path rewritten, key said a regular, alias' ^ / login 'value said:'/' / / box '/ API said' http://localhost:3000/api '}},Copy the code

The documentation is as follows:

www.webpackjs.com/configurati…