Writing in the front

In today’s Internet industry, most Web projects basically adopt the mode of front and back end separation. The front end is H5 project, and the back end is Java, PHP, Python and other projects. Moreover, most back-end services do not deploy only one set of services, but use Nginx to load balance back-end services. Then, there is a problem: if the protocol, domain name, or port of a URL request is different from the current page URL, cross-domain phenomena can occur. So how do you use Nginx to solve cross-domain problems? So let’s talk about this.

Why cross domains?

The same origin policy is restricted by the browser. The Sameoriginpolicy is a convention. It is the core and basic security function of the browser. If the Sameoriginpolicy is missing, the normal functions of the browser may be affected. The Web is built on the same origin policy, and browsers are just an implementation of the same origin policy. The same origin policy prevents javascript scripts in one domain from interacting with content in another domain. Same-origin (that is, in the same domain) means that two pages have the same protocol, host, and port number.

How does Nginx address cross-domain?

Here, we use Nginx reverse proxy function to solve the cross-domain problem, as for what is Nginx reverse proxy, please search or Google it.

Nginx acts as a reverse proxy server that forwards HTTP requests to another or several servers. Cross-domain access is achieved by mapping a local URL prefix to the Web server to be accessed cross-domain. For the browser, it’s a URL on the same-origin server. Nginx, on the other hand, forwards HTTP requests to real physical servers by detecting the URL prefix. Rewrite command to strip the prefix out again. This way, the real server can handle the request correctly and not be aware that the request is from a 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, editing the contents of the server node of the nginx.conf file as shown below.

server { location / { root html; index index.html index.htm; // Allow CROs to access add_header across domains'Access-Control-Allow-Origin' The '*'; Rewrite ^.+apis/? $/ (. *)The $1 break; include uwsgi_params; proxy_pass http://www.binghe.com; }}Copy the code

Then I put the project deployment in nginx HTML root directory, when the ajax call set url from http://www.binghe.com/apistest/test to www.binghe.com/apis/apiste…

Suppose the Ajax request I made earlier on the page 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 ')}});Copy the code

Change the request to the following to resolve 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')}});Copy the code

Ok, that’s enough for today! Don’t forget to click a like, to see and forward, let more people see, learn together, progress together!!

Write in the last

If you think glacier wrote good, please search and pay attention to “glacier Technology” wechat public number, learn with glacier high concurrency, distributed, micro services, big data, Internet and cloud native technology, “glacier technology” wechat public number updated a large number of technical topics, each technical article is full of dry goods! Many readers have successfully moved to Dachang by reading articles on the “Glacier Technology” wechat official account; There are also many readers to achieve a technological leap, become the company’s technical backbone! If you also want to like them to improve their ability to achieve a leap in technical ability, into the big factory, promotion and salary, then pay attention to the “Glacier Technology” wechat public account, update the super core technology every day dry goods, so that you no longer confused about how to improve technical ability!