Using Nginx to solve cross-domain problems (flask as an example)

Background

The architecture of our organization is a middle layer (python written) between API and JS to achieve back-end rendering, login status determination, cross-domain forwarding API and so on. But such a middle will make the front-end engineer's workload multiply twice times, originally JS can direct Ajax request API, but we have to Ajax request the middle tier, the middle tier again request API.

To cut down on the code and increase productivity, of course we want to chop the Python middle layer, but how to solve the following three issues, become the key:

1. Back-End rendering
2. Login Status Determination
3. Cross-domain Forwarding API

I will explain in detail in another two blogs, this article mainly solves 3, namely cross-domain problem. There are many ways to solve the cross-domain problem: Reverse proxy, JSONP,cross-origin Resource sharing, etc., we are implemented by Nginx reverse proxy today.

create a new two Flask program to experiment

Open Pycharm, and the new project selection Flask,name is set to client and server, respectively.

Write the client and server python files so that they run on port 5000 and port 5001 respectively:

client.py

 from Import  = Flask (__name__) @app. Route ('/')def Hello_world ():     return ' The IS client ' if __name__ ' __main__ ' :    app.run (Port=5000)

server.py

 fromFlaskImportFlaskapp= Flask (__name__) @app. Route ('/')defHello_world ():return 'This is server'@app. Route ('/api/')defAPI ():return 'API'if __name__=='__main__': App.run (Port=5001)

Run client.py

Run server.py

installing Nginx (Ubuntu)

Open new stand, search Nginx, select and install. Ubuntu is so simple, other platforms are not described, can search by themselves.

configure Nginx to forward 5000 port (client) requests to 5001 ports (server side)

Open the Nginx default configuration file:

sudo gedit/etc/nginx/sites-available/default

Add the following command at the end of the file:

# # Demo Listen5017Proxy theand5001# #server {Listen5017;    server_name a.xxx.com; Access_log/var/log/nginx/A.access.log; Error_log/var/log/nginx/A.error.log;    root HTML;    Index index.html index.htm index.php; # # Send request back to Flask # # Location/{proxy_pass http://127.0.0.1:5000/;#Proxy Settings proxy_redirect off;        Proxy_set_header Host $host; Proxy_set_header X-real-IP $remote _addr; Proxy_set_header X-forwarded-For $proxy _add_x_forwarded_for;        Proxy_next_upstream Error timeout Invalid_header http_500 http_502 http_503 http_504; Proxy_max_temp_file_size0; Proxy_connect_timeout -; Proxy_send_timeout -; Proxy_read_timeout -;        Proxy_buffer_size 4k; Proxy_buffers432k;   Proxy_busy_buffers_size 64k; } Location/Proxy {rewrite^.+proxy/? (.*)$ /$1Break ; Proxy_pass http://127.0.0.1:5001/;#Proxy Settings proxy_redirect off;        Proxy_set_header Host $host; Proxy_set_header X-real-IP $remote _addr; Proxy_set_header X-forwarded-For $proxy _add_x_forwarded_for;        Proxy_next_upstream Error timeout Invalid_header http_500 http_502 http_503 http_504; Proxy_max_temp_file_size0; Proxy_connect_timeout -; Proxy_send_timeout -; Proxy_read_timeout -;        Proxy_buffer_size 4k; Proxy_buffers432k;   Proxy_busy_buffers_size 64k; }}## End a.xxx.com # #

Run Nginx:

Sudo

These commands made localhost:5017 agent localhost:5000,

Make Localhost:5017/proxy agent of localhost:5001,

Make localhost:5017/proxy/api/agent of localhost:5001/api/,

In this case, the URL from Port 5000 to request a 5001 port has become a/proxy from Port 5017 requesting 5017 ports. Resolves cross-domain issues brought by the same-origin policy.

This configuration file can also be used with UWSGI, or can not uwsgi, directly run the Python file start service, this article is the latter one.

Using Nginx to solve cross-domain problems (flask as an example)