使用nginx解决跨域问题(flask为例)

背景

我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能。但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax请求api,但是我们不得不ajax请求中间层,中间层再请求api。如图:

为了少敲代码,提高工作效率,我们当然希望将python中间层砍掉,但是如何解决以下三个问题,成为关键:

  1. 后端渲染
  2. 登录状态判定
  3. 跨域转发api

关于1,2我会在另外两篇博客中详细叙述,这篇文章主要解决3,也就是跨域问题。解决跨域问题方法很多:反向代理,jsonp,Cross-Origin Resource Sharing等,我们今天通过nginx反向代理实现。

新建两个flask程序来实验

打开pycharm,新建项目选择flask,name分别设为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)

运行client.py

运行server.py

安装nginx(ubuntu)

打开新立得,搜索nginx,选中并安装。ubuntu就是这么简单,其他平台暂不叙述,可自行搜索。

配置nginx,使其将5000端口(客户端)的请求转发到5001端口(服务器端)

打开nginx默认的配置文件:

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

运行nginx:

sudo /etc/init.d/nginx restart 

这些命令使得localhost:5017代理了localhost:5000,如图:

使得localhost:5017/proxy代理了localhost:5001,如图:

使得localhost:5017/proxy/api/代理了localhost:5001/api/,如图:

如此以来,原本需要从5000端口请求5001端口的url,变成了从5017端口请求5017端口的/proxy。解决了同源策略带来的跨域问题。

这个配置文件也可以和uwsgi配合起来用,也可以不用uwsgi,直接运行python文件启动服务,本文便是后一种。

时间: 2024-10-15 14:49:41

使用nginx解决跨域问题(flask为例)的相关文章

使用Nginx解决跨域,防盗链,宕机,DDOS攻击

一:负载均衡时服务器宕机轮询策略 在通过代理服务器nginx向真实的服务器发送请求时,如果有一个服务器集群,它们按照轮询或者权重的负载均衡策略运作下去,当轮到a(端口6060)服务器接受nginx的请求时, a服务器突然宕机了,那么没有做任何措施的情况下,这个请求会一直请求下去,直到被响应或者响应超时报错,这种情况下需要添加一些配置, 当有服务器宕机的时候,在一定时间内他没有响应,就换另一个服务器去接受这个请求 在负载均衡的配置基础上添加新的配置,下面字体 upstream backserver

Nginx解决跨域

一.静态页面服务器 nginx.conf 的配置(其实默认的也是如此,所以作为静态服务器只需要将静态文件移动到nginx下的html文件夹里就可以了) server {      listen       8094; #监听端口      server_name  localhost; # #charset koi8-r; #access_log  logs/host.access.log  main; location / {          root   html;#文件根目录      

nginx 解决跨域需要几行

在指定的主机location 下添加以下语句便可; 如: location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested- With,If-Modif

使用Nginx来解决跨域的问题

nginx的版本:(查看nginx命令: /usr/local/nginx/sbin/nginx -v) nginx/1.4.3 问题是:前端项目域名是 a.xxxx.com, 后端的接口域名是 b.xxx.com,然后后端接口没有设置跨域相关的响应设置头,因此就接口和我们域名就会存在跨域的情况,因此我们可以使用 nginx服务器来配置一下: 网上很多资料将 在nginx配置下 加如下代码就可以解决跨域的问题: add_header Access-Control-Allow-Origin *;

前端通过Nginx反向代理解决跨域问题

本文探讨了前端如何通过Nginx反向代理的方式解决跨域问题. 跨域 再次重申: 跨域是浏览器行为,不是服务器行为. 实际上,请求已经到达服务器了,只不过在回来的时候被浏览器限制了.就像Python他可以进行抓取数据一样,不经过浏览器而发起请求是可以得到数据,想到通过Nginx的反向代理来解决跨域问题. 代理 所谓代理就是在我们和真实的服务器之间有一台代理服务器,我们所有的请求都是通过它来进行转接的. 正向代理 正向代理就是我们访问不了Google,但是我在国外有一台vps,它可以访问Google

vue前后端分离解决跨域问题

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现. vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html 我自己在网上找了2个接口做测试: CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 掘金:https://

Flask解决跨域

Flask解决跨域 问题:网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify. 然后ajax就报错:No 'Access-Control-Allow-Origin' header is present on the requested 原因:ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,type设为POST

nginx解决服务器宕机、解决跨域问题、配置防盗链、防止DDOS流量攻击

解决服务器宕机 配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location / { proxy_connect_timeout 1; proxy_send_timeout 1; proxy_read_timeout 1; proxy_pass http://backserver; index index.html index.htm; } proxy_connect_timeout 1; :连接超时1秒 proxy_send_timeout 1; :请求超时1秒 pr

flask后端+ajax前端,解决跨域资源引起CORB问题

在 Javascript 中跨域访问是比较常见的事情,这次记录使用flask写后端API,前端ajax调用时产生的跨域问题. 问题描述:跨域资源引起CORB. 解决方案: jsonp解决跨域问题 前端代码: // 回掉函数,默认callback=jQuery30004159376653216822_1550582355513 function showData(data) { console.info("Get Into showData"); // json对象转成字符串 var r