• notice
  • Congratulations on the launch of the Sought Tech site

How to use Nginx to solve cross-domain problems?

write in front

In today's Internet industry, most Web projects basically adopt the front-end and back-end separation mode. The front end is H5 project, and the back end is Java, PHP, Python and other projects. And most back-end services will not deploy only one set of services, but will use Nginx to load balance the back-end services. Then, there will be a problem at this time: if any one of the protocol , domain name, and port of a request url is different from the current page url, a cross-domain phenomenon will occur. So how to use Nginx to solve cross-domain problems? Next, let's discuss this issue together.

Why cross domain?

Due to browser same-origin policy restrictions. The Same Origin Policy (Sameorigin Policy) is a convention. It is the core and most basic security function of the browser. If the Same Origin Policy is missing, the normal functions of the browser may be affected. It can be said that the Web is built on the basis of the same-origin policy, and the browser is only an implementation of the same-origin policy. The Same Origin Policy prevents JavaScript scripts from one domain from interacting with content from another domain. The so-called same origin (meaning in the same domain) means that two pages have the same protocol, host and port.

How does Nginx solve cross-domain?

Here, we use Nginx's reverse proxy function to solve cross-domain problems. As for what is Nginx's reverse proxy, please use Baidu or Google.

As a reverse proxy server, Nginx forwards http requests to another or some servers. Cross-domain access can be achieved by mapping a local URL prefix to the web server to be accessed across domains. For the browser, what is accessed is a url on the same-origin server. And Nginx forwards the http request to the real physical server behind by detecting the url prefix. And use the rewrite command to remove the prefix. This way the real server can handle the request correctly and doesn't know that the request is coming from the proxy server.

Nginx solves cross-domain cases

When using Nginx to solve cross-domain problems, we can compile the nginx.conf configuration file of Nginx, for example, edit the content of the server node of the nginx.conf file as shown below.

server {
        location / {
            root html;
            index index.html index.htm;
            //Allow cros cross-domain access
            add_header 'Access-Control-Allow-Origin' '*';

        }
        //custom local path
        location /apis {
            rewrite ^.+apis/?(.*)$ /$1 break;
            include uwsgi_params;
            proxy_pass http://www.binghe.com;
       }
}

Then I deployed the project in the html root directory of nginx, and set the url from http://www.binghe.com/apistest/test to http://www.binghe.com/apis/apistest/test during ajax call Then successfully resolved.

Suppose, the Ajax request I made on the page earlier looks like this.

$.ajax({
        type:"post",
        dataType: "json",
        data:{'parameter':JSON.stringify(data)},
        url:"http://www.binghe.com/apistest/test",
        async: flag,
        beforeSend: function (xhr) {

            xhr.setRequestHeader("Content-Type", submitType.Content_Type);
            xhr.setRequestHeader("user-id", submitType.user_id);
            xhr.setRequestHeader("role-type", submitType.role_type);
            xhr.setRequestHeader("access-token", getAccessToken().token);
        },
        success:function(result, status, xhr){
     
        }
        ,error:function(e) {
            layerMsg('Request failed, please try again later')
        }
    });

Modifying the request to the following can solve the cross-domain problem.

$.ajax({
        type:"post",
        dataType: "json",
        data:{'parameter':JSON.stringify(data)},
        url:"http://www.binghe.com/apis/apistest/test",
        async: flag,
        beforeSend: function (xhr) {

            xhr.setRequestHeader("Content-Type", submitType.Content_Type);
            xhr.setRequestHeader("user-id", submitType.user_id);
            xhr.setRequestHeader("role-type", submitType.role_type);
            xhr.setRequestHeader("access-token", getAccessToken().token);
        },
        success:function(result, status, xhr){
     
        }
        ,error:function(e) {
            layerMsg('Request failed, please try again later')
        }
    });


Tags

Technical otaku

Sought technology together

Related Topic

0 Comments

Leave a Reply

+