Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to deal with AJAX cross-domain requests in the Nginx server. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Nginx implements ajax cross-domain request

Ajax has cross-domain problems when requesting from one domain to another. So how to implement ajax cross-domain requests on nginx? To enable cross-domain requests on nginx, you need to add the add_header access-control* directive. As follows:

Location / {add_header 'access-control-allow-origin'' http://other.subdomain.com';add_header 'access-control-allow-credentials'' true';add_header 'access-control-allow-methods'' get';. The rest of your configuration here. }

The notes are as follows:

First instruction: authorize a request from other.subdomain.com

Second instruction: when the flag is true, the response to whether the request can be exposed

Third day instruction: specify the method of the request, which can be get,post, etc.

If you need to allow access from any domain, you can configure it like this:

Access-control-allow-origin: *

Restart nginx

Service nginx reload

Ajax cross-domain request test

When successful, the response header is as follows:

Http/1.1 200 okserver: nginxaccess-control-allow-origin: other.subdomain.com

Using the reverse proxy of nginx and apache to solve the cross-domain problem of ajax

There is a very attractive feature on the Aoyou main site, which is the number of downloads, as shown in the following figure. This function is realized by using the above technologies.

As you can see from the firebug in the figure below, the page repeatedly requests a path called / api/counter through ajax to get the latest number of downloads.

This output path actually does not exist on the server, this path is just a path of another server, which is realized by using the reverse proxy function of nginx.

1 、 nginx

Going back to the counter example, the configuration snippet for nginx is as follows:

Location / api/counter {rewrite (. *) / out break; proxy_pass http://hfahe.maxthon.com; proxy_set_header host "hfahe.maxthon.com";}

Then accessing the http://www.maxthon.cn/api/counter address, the output is exactly the same as directly accessing the http://hfahe.maxthon.com/out address, as shown in the following figure. In this way, the local ajax can read data from other remote servers.

The proxy_set_header parameter is used when domain name forwarding is needed. Nginx can also forward the port, as long as the proxy_pas

S configuration can be modified to http://hfahe.maxthon.com:81.

2 、 apache

Apache reverse proxy requires modules such as mod_proxy and mod_proxy_http.so.

The configuration under windows is as follows:

Loadmodule proxy_module modules/mod_proxy.so loadmodule proxy_http_module modules/mod_proxy_http.so proxyrequests off proxypass / start http://i.maxthon.cn/ proxypass / proxy http://192.168.1.111/proxy/ proxypassreverse / proxy http://192.168.1.111/proxy/ # for server redirect

Both the proxypass and proxypassreverse instructions are required configurations for reverse proxies. Proxypass is used to map a remote server to the url space of the local server. On the other hand, proxypassreverse mainly solves the problem of bypassing the reverse proxy caused by the redirection of the back-end server. It is used when the back-end server is redirected to adjust the location, content-location and url in the response to the http redirection.

The configuration under linux is as follows:

Loadmodule proxy_module / usr/lib/apache2/modules/mod_proxy.so loadmodule proxy_http_module / usr/lib/apache2/modules/mod_proxy_http.so proxyrequests off proxypass / fb http://fb.maxthon.com/ajax proxypassreverse / fb http://192.168.1.111/proxy/ # for server redirect is all the contents of the article "how to handle AJAX cross-domain requests in Nginx servers". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.