Use Nginx reverse proxy to process frontend and backend cross-origin access

Use Nginx reverse proxy to process frontend and backend cross-origin access

This article mainly solves the problem of using Nginx reverse proxy to process frontend and backend cross-origin access.

The problem is as follows:

Failed to load http: // 192.168.1.20.: 8081/service/getStation? Line = 1: No 'access-Control-Allow-origin' header is present on the requested resource. Origin 'HTTP: // 192.168.1.136: 8081 'is therefore not allowed Access.

Problem Analysis:

Disabling cross-origin is actually a security behavior of browsers.

This problem occurs because the front-end and backend servers are on different servers (IP addresses) and the front-end access backend servers cannot transmit data through the same link. In this case, if ajax is used to remotely backend servers, an error is reported.

Solution:

Configure nginx to process both front-end access requests and backend responses through nginx reverse proxy

Similar to the above:

192.168.1.136: 8081 is the frontend,
192.168.1.20.: 8081 is the background, tomcat
192.168.1.11 is an nginx server.

Edit the nginx configuration file and configure the following content:

Vim from_front_to_background.conf

# For Front end
Server {
Listen 8136;
Server_name 192.168.1.11;
Charset UTF-8;
Location /{
Proxy_pass http: // 192.168.1.136: 8081;
}
}
# For background
Server {
Listen 8137;
Server_name 192.168.1.11;
Charset UTF-8;
Location /{
Proxy_pass http: // 192.168.1.20.: 8081;
Proxy_set_header Host $ host;
Proxy_set_header X-Real-IP $ remote_addr;
Proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for;
}
}

The following parameters can be added or not added to check whether they can be used.

Proxy_set_header Host $ host;
Proxy_set_header X-Real-IP $ remote_addr;
Proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for;

After the configuration is complete, reload the nginx configuration file and access 192.168.1.11: 8136 at the front end for subsequent debugging.

Service nginx reload

Other parameters that can be added:
Based on the information found in the error message, I can solve the problem even if I did not use it,
If you have any questions, add the following parameters to the location tag.

Add_header 'access-Control-Allow-origin' l and www.bkjia.com/ B .html

Expansion 2. Common cross-origin solutions (excerpt)

Https://www.cnblogs.com/gabrielchen/p/5066120.html

Currently, there is no technology that does not rely on the server to request resources across domains.

1. jsonp requires the target server to work with a callback function.
2. window. name + iframe requires the target server to respond to window. name.
3. window. location. hash + iframe must also be processed by the target server.
4.html 5's postMessage + ifrme also requires the target server or the target page to write a postMessage, mainly focusing on front-end communication.
5. CORS requires the server to set the header: Access-Control-Allow-Origin.
6. nginx reverse proxy, which can be handled by a technician

Complete.

You may also like the following Nginx articles. For more information, see:

Installation configuration https://www.bkjia.com/Linux/2017-04/142986.htm of Nginx server in CentOS 7
Install Nginx server on CentOS for virtual host and Domain Name Redirection https://www.bkjia.com/Linux/2017-04/142642.htm
CentOS 6.8 install LNMP environment (Linux + Nginx + MySQL + PHP) https://www.bkjia.com/Linux/2017-04/142880.htm
Install the PHP environment in Linux and configure Nginx to support php-fpm module https://www.bkjia.com/Linux/2017-05/144333.htm
SSL authentication and htpasswd authentication https://www.bkjia.com/Linux/2017-04/142478.htm for Nginx services
Enable encrypted secure Nginx Web Server https://www.bkjia.com/Linux/2017-07/145522.htm on Ubuntu 16.04
Installation and configuration of Nginx in Linux and detailed description of parameters https://www.bkjia.com/Linux/2017-05/143853.htm
Nginx log filtering using ngx_log_if does not record specific log https://www.bkjia.com/Linux/2014-07/104686.htm
CentOS 7.2 Nginx + PHP + MySQL + Memcache Cache Server Installation configuration https://www.bkjia.com/Linux/2017-03/142168.htm
Tomcat Load Balancing https://www.bkjia.com/Linux/2018-03/151223.htm through Nginx reverse proxy
Nginx reverse proxy server https://www.bkjia.com/Linux/2018-03/151418.htm

Nginx details: click here
Nginx: click here

This article permanently updates link: https://www.bkjia.com/Linux/2018-03/151469.htm