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.137: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, and atat192.168.1.11 is the nginx Server

Edit the nginx configuration file and configure the following content:

vim from_front_to_background.conf

# For Front endserver {    listen 8136;    server_name 192.168.1.11;    charset utf-8;    location / {        proxy_pass http://192.168.1.136:8081;    }}# For backgroundserver {    listen 8137;    server_name 192.168.1.11;    charset utf-8;    location / {        proxy_pass http://192.168.1.137: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' 'http://www.zuiyoujie.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET';

Article 1: authorize requests from www.zuiyoujie.com. If you want requests from any domain, you can change the domain name to "*".

It is also said that this method is applicable when others access us.

Article 2: when the flag is true, whether the request can be exposed
Day 3: Specify the request method, such as GET and POST.

Ajax cross-origin request test
When the request is successful, the response header is as follows:

HTTP/1.1 200 OK Server: nginx Access-Control-Allow-Origin: www.zuiyoujie.com

 

Expansion 1: What is cross-origin access?
Cross-origin access:
1. Access between different domain names

Www.zuiyoujie.com and www.baidu.com

2. Different ports for the same domain name

Www.zuiyoujie.com and www.zuiyoujie.com: 8080

3. Different protocols,

Http and https

4. The domain name and its own IP address,

Www.zuiyoujie.com and its resolved IP Address: 192.168.1.1

5. The second-level domain names are the same, and the third-level domain names are different,

Aaa.zuiyoujie.com and ttt.zuiyoujie.comwww.zuiyoujie.com and zuiyoujie.com

The following types are for this domain access:

1. Different sub-paths for the same domain name,

Www.zuiyoujie.com/a.htmland www.zuiyoujie.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

Finished.