The simplest way to implement a cross-domain approach using Nginx reverse proxy

What is a cross-domain

     跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。    所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。

The purpose of homologous strategy is to prevent hackers do some of the activities of rape raped. For example, if a bank application allows users to upload Web pages, if there is no homologous strategy, hackers can write a login form to submit to their server, to get a page that looks quite tall. Hackers to this page by mail and so on to the user, the user mistakenly think that this is a bank's main page to log on, will reveal their own user data. Hackers cannot receive form data because of the browser's same-origin policy.

   现在随着RESTFUL的流行，很多应用提供http/https接口的API，通过xml/json格式对外提供服务，实现开放架构。如，微博、、天气预报、openstack等网站和应用都提供restful接口。     Web应用也在向单页面方向发展。

A growing number of Web applications are now such architectures:

             静态单个web页面                 ajax调用           RESTFUL服务   我们本可以利用各个网站提供的API，做出很多精彩的Web应用。但浏览器执行javascript时的跨域限制，就成为了这类开放架构的拦路虎。

This paper presents a simple and effective way to solve cross-domain problems.

Common cross-domain methods commonly used across domains are as follows:

1. Use an IFRAME to access another domain. The contents of the IFrame are then read from another page. There are some packages for jquery.

It is said that Firefox may not support reading the contents of another IFRAME.

2,jsonp. Server support is required. Use script src to dynamically get a piece of Java code. is the JS function on the callback page, and the parameter is a JSON object.

jquery also has encapsulation.

3, set HTTP header, access-control-allow-origin:*

But some versions of IE are said to not recognize this HTTP header.

4, Server Proxy. For example, the server writes a URL to handle the action. Its argument is a URL. This server will use parameters to cobble together a URL, use the HttpClient library to execute the URL, and then output the read content to the HTTP client.

Nginx reverse proxy for cross-domain

  上面提到的这些跨域方法，都有一些问题。有的不能支持所有浏览器，有的需要修改javascript代码，有的需要重写服务器端代码。有的在session等场景下会有问题。 其实，用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。 我们只需要配置nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样，这个服务器上所有url都是相同的域名、协议和端口。因此，对于浏览器来说，这些url都是同源的，没有跨域限制。而实际上，这些url实际上由物理服务器提供服务。这些服务器内的javascript可以跨域调用所有这些服务器上的url。 下面，给出一个nginx支持跨域的例子，进行具体说明。

For example, we have two projects developed by Pythonflask: TestFlask1 and TestFlask2.

The JavaScript script on the TESTFLASK2 project wants to get some data by calling a URL for TestFlask1 in AJAX mode.

Under normal deployment, there will be a cross-domain issue where the browser refuses to perform a call such as the following.

$ ("button"). Click (function () {

$.get ("127.0.0.1:8081/partners/json", function (Result) {

$ ("div"). html (result);

});

});

 下面把testFlask2项目的javascrip文件修改一下。这样访问同源的url，就不会有跨域问题。

$ ("button"). Click (function () {

$.get ("Partners/json", function (Result) {

$ ("div"). html (result);

});

});

但是，我们testFlask2项目实际上没有partners/json这样的url，那怎么处理呢？我们这样编写nginx的配置文件：

server{

listen8000;

location/{

Includeuwsgi_params;

Uwsgi_passunix:/tmp/testflask2.sock;

}

location/partners {

Rewrite^.+partners/? (. *) $/$1 break;

Includeuwsgi_params;

Uwsgi_passunix:/tmp/testflask1.sock;

}

}

  我们把testFlask2项目部署在8080端口的根目录下。把提供web服务的testFlask1项目部署在/partners目录下。

However, our TestFlask1 project does not handle URL requests such as/partners/json. What about that?

Through rewrite^.+partners/? (. ) $/$1 break; This command, Nginx can convert the received/partners/ request to/* request and then forwarded to the real Web server behind.

 这样，RESTFUL的ajax客户端程序，只需要给出特定前缀的url就可以调用任意服务器提供的RESTFUL接口了。 甚至，通过nginx的反向代理，我们还能调用其他公司开发的网站提供的RESTFUL接口。

Such as

Location/sohu {

rewrite^.+sohu/? (. *) $/$1 break;

Includeuwsgi_params;

proxy_passhttp://www.sohu.com/;

}

 我们就把sohu网站整个搬到我们的8080:/sohu/目录下了，我们的javascript就可以尽情调用其RESTFUL服务了。  顺便说一下，rewrite^.+sohu/?(.*)$ /$1 break;  这句命令中，$1表示(.*)这个部分。第一对()内的参数是$1，第二对()内的参数就是$2，以此类推。

Summarize

  本文介绍了利用nginx的反向代理的功能，实现跨域访问任意应用和网站的方法。  nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。 通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。 对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。 简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。 这样，为了解决跨域问题，只需要动一下nginx配置文件即可。简单、强大、高效!

原文链接:https://github.com/shendl1978/blog/wiki/%E6%9C%80%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0%E8%B7%A8%E5%9F%9F%E7%9A%84%E6%96%B9%E6%B3%95----%E4%BD%BF%E7%94%A8nginx%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86

The simplest way to implement a cross-domain approach using Nginx reverse proxy