Browser cross-domain origin policy issues cause analysis

1. What is cross-domain?

Remember one thing:
as long as the domain name (ip), protocol (http and https), ports which are not the same either, all cross-domain requests.

2. Why do we need cross-domain

Because there is a browser-origin policy, why we have cross-domain problem. The browser is there any reason to limit cross-domain out of it. In fact, not difficult to think, cross-domain main purpose is to limit the user's Internet security.

If the browser does not have the same origin policy, what security issues exist yet. The following from the same origin policy and XMLHttpRequest DOM-origin policy to illustrate:

If there is no DOM-origin policy, that is to say between the different domains iframe can access each other, hacker attacks can be carried out:

1. Make a fake Web site, the iframe nested inside a bank website http://mybank.com.
2. The width and height gradually getting adjusted to all the iframe page, so that users come in addition to the domain name, and the other part of the bank's website is no different.
3. If the user then enter the account password, our main site can be cross-domain access to http://mybank.com dom node, you can get the user's account password.

If XMLHttpRequest origin policy, then the hacker can CSRF (cross-site request forgery) attacks:

1. Users logged into your bank page http: //mybank.com,http: //mybank.com add a user ID to the user's cookie.
2. Users browsing malicious page http://evil.com, performed page malicious AJAX request code.
3. http://evil.com initiate AJAX HTTP request to http://mybank.com, the request will default to the corresponding cookie http://mybank.com also send the past.
4. Bank page is extracted from the cookie transmitted user identification, user authentication is correct, response requested data is returned. At this point the data is leaked.
5. And because Ajax in the background, the user can not perceive this process.

So, with the browser same-origin policy, we can be safer online.

3. is not only the presence of the same origin policy browsers

Yes. If you are in when the back-end code to request the interface to another server, there is no same-origin policy, because same-origin policy only for the browser.

Request the front end interface needs to solve two problems:

1. The server supports cross-domain
2. Solve your browser's same-origin policy restrictions

Server requests another server interfaces only need to solve a problem:

1. The requested cross-domain server support

4. how to solve the limitations of the browser same-origin policy

Here I can only say two, one is JSONP, very classic, early solution to the problem of cross-domain. The second is vue project development environment and production environment proxytable forward proxy nginx

1. JSONP (. Use img, src attribute of the script tag is unlimited same-origin policy is the principle of the callback function written url, the server accepts parameters, callback)
   article reference: https: //www.cnblogs.com/soyxiaobi /p/9616011.html
2. Forward Proxy

Development Environment: proxyTable (vue.config.js)

proxyTable: {
      '/api': { //代理的目的：只要是/api开头的路径都往47.xx.xx.91:8848进行转发
        target: 'http://47.xx.xx.91:8848',   //设置代理服务器地址
        changeOrigin: true,
      }
    },

Production environment: nginx (nginx.conf)

     server {
              listen 3001;
              server_name 47.xx.xx.57;

       location / {
           root   /home/dist/; 
           try_files $uri $uri/ /index.html;
       }
        location /api {
            proxy_pass http://121.xx.xx.234:8848/api;
        }
      }

The forward proxy process:

1. I want to access the real address: 47.21.76.91:8848/api/book/list
2. proxyTable arranged above
3. Initiation request this.axios.post ( 'api / book / list')
4. Then we address the browser display is: localhost: 8080 / api / book / list
5. In fact it is called real address

Whether proxyTable development environment or nginx forward proxy. Not only solved the problem of cross-domain, but also effectively prevent the server address is exposed.