使用nginx解决跨域问题(flask为例)
背景
我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能。但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax请求api,但是我们不得不ajax请求中间层,中间层再请求api。如图:
为了少敲代码,提高工作效率,我们当然希望将python中间层砍掉,但是如何解决以下三个问题,成为关键:
- 后端渲染
- 登录状态判定
- 跨域转发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 proxy and ## server { listen ; 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 ; proxy_connect_timeout ; proxy_send_timeout ; proxy_read_timeout ; proxy_buffer_size 4k; proxy_buffers 32k; proxy_busy_buffers_size 64k; } location /proxy { rewrite ^.+proxy/?(.*)$ /$ 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 ; proxy_connect_timeout ; proxy_send_timeout ; proxy_read_timeout ; proxy_buffer_size 4k; proxy_buffers 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文件启动服务,本文便是后一种。
使用nginx解决跨域问题(flask为例)的更多相关文章
- nginx解决跨域(前后端分离)
Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 利用nginx解决跨域问题
访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...
- 前端如何使用proxyTable和nginx解决跨域问题
最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...
- vue项目打包本地后通过nginx解决跨域
前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
- Nginx解决跨域问题(CORS)
跨域 解决跨域问题一般有两种思路: CORS 在后端服务器设置 HTTP 响应头,把你需要运行访问的域名加入加入 Access-Control-Allow-Origin中. jsonp 把后端根据请求 ...
- Nginx解决跨域问题No 'Access-Control-Allow-Origin'
使用nginx在server块下的location块下为请求添加请求头来解决跨域 add_header 'Access-Control-Allow-Origin' '*'; add_header 'A ...
- 【nginx】nginx解决跨域详解
使用场景:本地运行一个项目,但是要访问外域的api接口,存在跨域问题,解决方式有很多,但我尝试用nginx解决,搜索了网上文章后再加上尝试终于成功, 其中一些注意事项和大家分享一下. 一.window ...
随机推荐
- php留言
使用yum安装php yum install pnp -y 安装httpd服务 yum install httpd -y 使用地三方软件将已经制作好的网站如"FileZilla"
- java分享第十八天-02( java结合testng,利用XML做数据源的数据驱动)
testng的功能很强大,利用@DataProvider可以做数据驱动,数据源文件可以是EXCEL,XML,YAML,甚至可以是TXT文本.在这以XML为例:备注:@DataProvider的返回值类 ...
- ajax和jquery
ajax的定义: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Ja ...
- 格式化input输入内容(金额)
项目中要用到格式化金额输入框,要求每三个数字用逗号分割开. 添加一个directive angular.module('myApp.directives', []) .directive('filte ...
- 欢迎进入MyKTV前后台点歌系统展示
一个项目,一分收获:一个项目,一些资源.Ktv项目也是一样的,所以我想分享我的收获,让你们获得你需要的资源. 一. 那MyKTV点歌系统具体的功能有哪些呢?我们就来看看吧! 1.MyKTV前台功能: ...
- phpcms v9常用方法
1.联动菜单根据地区id显示地区名称的方法: 显示效果: 四川 >> 攀枝花 >> 仁和区 [字段名字为 area] {get_linkage($info['area'],1, ...
- Comparing the MSTest and Nunit Frameworks
I haven't seen much information online comparing the similarities and differences between the Nunit ...
- composer安装
1.首先到php.net下载对应版本的php,zip版本即可,注意windows需要vc11运行库支持 2.配置path路径添加对php解压目录的引用 3.将php.ini-development ...
- 基于Redis的开源分布式服务Codis
Redis在豌豆荚的使用历程--单实例==>多实例,业务代码中做sharding==>单个Twemproxy==>多个Twemproxy==>Codis,豌豆荚自己开发的分布式 ...
- Node.js开发者最常范的10个错误
目录 前言 1 不使用开发工具 1.1 自动重启工具 1.2 浏览器自动刷新工具 2 阻塞event loop 3 频繁调用回调函数 4 圣诞树结构的回调(回调的地狱) 5 创建一个大而完整的应用程序 ...