快捷導(dǎo)航

利用nginx解決跨域問題的方法（以flask為例）

更新時(shí)間：2017年02月16日 10:41:22 作者：Lewis617

這篇文章主要介紹了利用nginx解決跨域問題的方法，文中以flask為例給大家介紹的很詳細(xì)，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。

前言

我們單位的架構(gòu)是在api和js之間架構(gòu)一個(gè)中間層（python編寫），以實(shí)現(xiàn)后端渲染，登錄狀態(tài)判定，跨域轉(zhuǎn)發(fā)api等功能。但是這樣一個(gè)中間會(huì)使前端工程師的工作量乘上兩倍，原本js可以直接ajax請(qǐng)求api，但是我們不得不ajax請(qǐng)求中間層，中間層再請(qǐng)求api。

如圖：

為了少敲代碼，提高工作效率，我們當(dāng)然希望將python中間層砍掉，但是如何解決以下三個(gè)問題，成為關(guān)鍵：

后端渲染
登錄狀態(tài)判定
跨域轉(zhuǎn)發(fā)api

關(guān)于1，2我會(huì)在另外兩篇博客中詳細(xì)敘述，這篇文章主要解決3，也就是跨域問題。解決跨域問題方法很多：反向代理，jsonp，Cross-Origin Resource Sharing等，我們今天通過nginx反向代理實(shí)現(xiàn)。

新建兩個(gè)flask程序來實(shí)驗(yàn)

打開pycharm，新建項(xiàng)目選擇flask，name分別設(shè)為client和server。

編寫client和server的python文件，使其分別跑在5000端口和5001端口：

client.py

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

server.py

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

運(yùn)行client.py

運(yùn)行server.py

安裝nginx（ubuntu）

打開新立得，搜索nginx，選中并安裝。ubuntu就是這么簡單，其他平臺(tái)暫不敘述，可自行搜索。

配置nginx，使其將5000端口（客戶端）的請(qǐng)求轉(zhuǎn)發(fā)到5001端口（服務(wù)器端）

打開nginx默認(rèn)的配置文件：

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

在文件末尾添加如下命令：

## 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 ##

運(yùn)行nginx: