怎么利用nginx解決跨域問題

本篇內(nèi)容介紹了“怎么利用nginx解決跨域問題”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

如圖：

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

1. 后端渲染

2. 登錄狀態(tài)判定

3. 跨域轉(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就是這么簡(jiǎn)單，其他平臺(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:

sudo /etc/init.d/nginx restart

這些命令使得localhost:5017代理了localhost:5000，如圖：

使得localhost:5017/proxy代理了localhost:5001，如圖：

使得localhost:5017/proxy/api/代理了localhost:5001/api/，如圖：

如此以來，原本需要從5000端口請(qǐng)求5001端口的url，變成了從5017端口請(qǐng)求5017端口的/proxy。解決了同源策略帶來的跨域問題。

這個(gè)配置文件也可以和uwsgi配合起來用，也可以不用uwsgi，直接運(yùn)行python文件啟動(dòng)服務(wù)，本文便是后一種。

“怎么利用nginx解決跨域問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！