Methods to Solve Cross-Domain Issues Using nginx (Take flask as an Example)

Introduction

The architecture of our unit is to build a middle layer (written in python) between api and js to achieve backend rendering, login status determination, cross-domain forwarding api and other functions. However, such a middle layer will double the workload of front-end engineers. Originally, js can directly make ajax requests to api, but we have to make ajax requests to the middle layer, and the middle layer makes requests to api.

As shown in the figure:

　

To reduce the amount of code and improve work efficiency, we naturally hope to eliminate the python middle layer, but how to solve the following three problems becomes the key:

1. Backend rendering
2. Login status determination
3. Cross-domain forwarding api
   

About12I will detail it in another two blogs, and this article mainly solves3That is, the cross-domain problem. There are many ways to solve the cross-domain problem: reverse proxy, jsonp, Cross-Origin Resource Sharing, etc., we implement it through nginx reverse proxy today.

Create two flask programs to experiment with

Open pycharm, create a new project, select flask, and set the name to client and server respectively.

Write python files for client and server to run separately on5Port 000 and5001Port:

client.py

from flask import Flask
app = Flask(__name__)
) def hello_world(): return 'this is client'/) def hello_world(): return 'this is client'
if __name__ == '__main__':
 app.run(port=5000)

server.py

from flask import Flask
app = Flask(__name__)
) def hello_world(): return 'this is client'/) def hello_world(): return 'this is server' @app.route('/api/) def api(): return 'api'
if __name__ == '__main__':
 app.run(port=5001)

Run client.py

Run server.py

Install nginx (Ubuntu)

Open synaptic, search for nginx, select and install. Ubuntu is that simple, other platforms are not described here, you can search for them yourself.

Configure nginx to forward5000 port (client side) requests are forwarded to5001Port (server side)

Open the default nginx configuration file:

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

Add the following command at the end of the file:

## demo listen 5017 proxy 5000 and 5001 ##
server {
 listen 5017; 
 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_size 0;
  proxy_connect_timeout 90;
  proxy_send_timeout 90;
  proxy_read_timeout 90;
  proxy_buffer_size 4k;
  proxy_buffers 4 32k;
  proxy_busy_buffers_size 64k;
 }
 location /proxy {
  rewrite ^.+proxy/?(.*)$ /$1 break;
  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_size 0;
  proxy_connect_timeout 90;
  proxy_send_timeout 90;
  proxy_read_timeout 90;
  proxy_buffer_size 4k;
  proxy_buffers 4 32k;
  proxy_busy_buffers_size 64k;
 }
}
## End a.xxx.com ##

run nginx:

sudo /etc/init.d/nginx restart

These commands make localhost:5017has proxied localhost:5000, as shown in the figure:

which makes localhost:5017/proxy proxyed localhost:5001is as shown in the figure:

which makes localhost:5017/proxy/api/has proxied localhost:5001/api/is as shown in the figure:

As a result, what was originally needed to be accessed from5000 port request5001The port URL has become from5017port request5017port/proxy. It solves the cross-domain problem caused by the same-origin policy.

This configuration file can also be used with uwsgi, or it can be used without uwsgi to directly run the python file to start the service. This article is the latter.

Summary

That's all for this article. I hope the content of this article can bring you some help in learning or work. If you have any questions, you can leave a message for communication.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.