Cross-domain issue resolved

One: What is cross-domain

concept:

JavaScript for security reasons, does not allow cross-domain calls subject to other pages. So what is it cross-domain, simply understand that because of the restrictions JavaScript same origin policy, a.com can not operate under the domain name of the object in js or cacom b.com domain.

When the protocol, the sub-domain, the domain master, the port number is not the same as any one, they are counted as different domains. Mutual request resources between different domains, even as a "cross-domain."

For example: http://www.abc.com/index.html request http://www.efg.com/service.php .

One thing must be noted: cross-domain request is not unable to go, the request can be sent out, the server to receive the request and return to normal result, but the result was the browser blocks. The reason for cross-domain, because of limited homology strategy, the same origin policy requires it to function properly communicate that protocol, domain names, port numbers are exactly the same.

The same domain:

The so-called refers to the same domain, the domain name, protocol, port are the same

Explanation:

  Protocol : http protocol (http difference is that he and https) Domain Name : domain name is like www.baidu.com, different domain names like www, baidu.com and www.hao123.com   ports : 8080 and 8081 is different ports

example:

URL whether to allow traffic 
HTTP: // www.domain.com/a.js 
HTTP: // www.domain.com/b.js the same domain name, or a different file path allows 
HTTP: // www.domain.com/lab /c.js 

HTTP: // www.domain.com:8000/a.js 
HTTP: // www.domain.com/b.js the same domain name, a different port does not allow 
 
HTTP: // www.domain.com/a .js 
HTTPS: // www.domain.com/b.js the same domain name, different protocol does not allow 
 
HTTP: // www.domain.com/a.js 
HTTP: // 192.168.4.12/b.js domain names and corresponding domain name do not allow the same ip 
 
http:// www.domain.com/a.js 
HTTP: // same x.domain.com/b.js primary domains, subdomains, different does not allow 
HTTP: // domain.com/c.js 
 
HTTP: // the WWW. domain1.com/a.js 
HTTP: // www.domain2.com/b.js different domain names are not allowed

Two: Same Origin Policy

Same Origin Policy:

Origin policy is a security feature browser client script different sources in the absence of express authorization, can not read and write other resources.

Origin policy restrictions:

How same-origin policy restrictions in load from a source document or script to interact with resources from another source. This is a critical security mechanism for isolating potentially malicious files. It is there to protect user privacy information, prevent identity forgery, etc. (read Cookie).

Origin policy restrictions contents are:

Cookie, LocalStorage, IndexedDB storage and other content
DOM node
AJAX request can not be transmitted

Some browsers are not subject to cross-domain limits:

1, page links, and redirects form submissions are not subject to the same origin policy restrictions.
2, the introduction of cross-domain resources is possible. But can not read and write js loaded content. The embedded page <script src = "..."> </ script>, <img>, <link>, <iframe> and the like.

Three : a common approach across domains

1: cross-domain projects in vue

Because of their common front-end framework vue, we first talk about how to deal with cross-domain in the vue. In cross-domain processing vue is still very easy to get, because the scaffolding vue-cli vue official offer has left us in advance for handling cross-domain interface, we only need to add a few lines of code on it:,

Find index.js config folder, there is a line proxyTable find inside: {}, this is the interface of our stay, we went in to add proxy rules

// example 'localhost: 8080 / api / xxx ' agent to 'www.example.com/api/xxx'
     @ Usage: https://vuejs-templates.github.io/webpack/proxy.html 
    proxyTable: {
       ' / API ' : { 
        target: ' http://xxxxxx.com ' , // domain interface
         // Secure: to false,   // if https interface need to configure this parameter 
        changeOrigin: to true , // if across the interface domains, the required parameters, it is true, the request header will be set to the rule (Access-Control-Allow-Origin ) to match the target server 
        pathRewrite: { 
          ' ^ / API ' : ''  //The interface address is not that common prefix '/ api', it is to be rewritten, if there is itself removed 
        } 
      } 
    },

Other cross-domain method how he did not come into contact with, do not write here, so as not to harm the younger generation, but I found a few good articles, require children's shoes can go to find out:

https://segmentfault.com/a/1190000011145364

https://www.cnblogs.com/smiler/p/5829621.html

http://www.imooc.com/article/40074

Cross-domain issue resolved

Guess you like