Flask框架踩坑之ajax跨域请求实现
作者:一杯闪光喵 发布时间:2023-12-25 01:28:02
业务场景:
前后端分离需要对接数据接口。
接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用。
问题:
前端ajax请求后端接口出现跨域问题,如下图。
翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端。
什么是Access-Control-Allow-Origin?
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?
请求协议
http,https
的不同域
domain
的不同端口
port
的不同
其实说简单点,跨域,指的就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
同源是指:协议相同,域名相同,端口相同。三者同时成立才能叫同源。
浏览器的同源策略从它诞生的那一刻就出现了,具体是指从域名A下的一个页面(一般是通过ajax请求)获取域名B下的一个资源,是不被浏览器允许的。
跨域资源共享(CORS)是浏览器提供的一种跨域协商机制,让前后端协商是否可以发出跨域请求。CORS添加了若干Access-controll-request-xxx 的头,给客户端声明自己的源、要使用的头部、用使用的请求方法;添加了若干Access-Controll-Allow-xxx的头,给服务端声明自己支持跨域的源、头部和方法。
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
解决方案(从后端解决)
1.后台接口允许跨域请求
以Python Flask框架为例,有两种方法。
第一种第三方插件实现,只需要安装第三方插件就可以轻松地为所有接口添加响应头。
pip3 install flask-cors
pip3 install flask-cors
from flask_cors import *
app = Flask(__name__)
# r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
CORS(app, resources=r'/*')
实际上就是为接口响应头添加了一个Access-Control-Allow-Origin并设置值*表示所有网站都可以请求。
第二种接口函数自定义添加属性。
res.headers['Access-Control-Allow-Origin'] = '*'
return res
为返回结果res属性headers设置Access-Control-Allow-Origin值为*。只对当前接口有效。
2.利用nginx反向代理
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题。
一般来说可以用来做:静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等,而且实现这一切,基本只需要改改那万能的配置文件即可。
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
}
1.由配置信息可知,我们让nginx监听localhost的80端口,本地的81端口有都是经过localhost的80端口进行访问。
2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。
3.rewrite ^/apis/(.*)$ /$1 break,代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。break代表匹配一个之后停止匹配。
总结一下,搭建一个nginx并把相应代码部署在服务器本机,由页面请求本域名的一个地址,转由nginx代理到目标服务器处理后返回结果给页面。这样就完美解决了跨域问题。
来源:https://www.cnblogs.com/lyxdw/p/10214216.html
猜你喜欢
- 一、回顾一下前面《Oracle开发之窗口函数》中关于全统计一节,我们使用了Oracle提供的:sum(sum(tot_sales)) ove
- 可以查看: 代码如下:OPEN SYMMETRIC KEY 命令关于 对称密钥加密使用证书解密 CREATE MASTER KEY ENC
- 前言python本身使用 \ 来转义一些特殊字符,比如在字符串中加入引号的时候s = 'i\'m superman'
- openpyxl特点openpyxl(可读写excel表)专门处理Excel2007及以上版本产生的xlsx文件,xls和xlsx之间转换容
- 本文实例讲述了python模拟鼠标拖动操作的方法。分享给大家供大家参考。具体如下:pdf中的书签只有页码,准备把现有书签拖到一个目录中,然后
- 函数input()的工作原理函数input()让程序暂停运行,等待用户输入一些文本。获取用户输入后,Python将其存储在一个变量中,以方便
- 在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的
- 本文实例讲述了php获取文章内容第一张图片的方法。分享给大家供大家参考,具体如下:<?php$temp=mt_rand(1,4);$p
- ping 基本概念ping (Packet Internet Groper)是一种因特网包探索器,用于测试网络连接量的程序。Ping是工作在
- 最近因需要用python写一个微服务来用MQTT给硬件传输图片,其中python用的是flask框架,大概流程如下:协议为:需要将图片数据封
- 阅读上一篇:FrontPage2002简明教程五:css样式表的应用 用户可以快速和容易地创建图片库,以显示图片或图像。他们可以将图像添加到
- 我看blog里,还有很多地方都引用过我写的这个类,转了不少,但自己一直也没发表过,这次正式发表一下。在蓝色理想中有人不懂怎么用,我在baid
- 前言首先线程和线程池不管在哪个语言里面,理论都是通用的。对于开发来说,解决高并发问题离不开对多个线程处理。我们先从线程到线程池,从每个线程的
- 一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用
- 那么在集合函数中它有什么用呢 ?假设数据库有一张表名为student的表。如果现在要你根据这张表,查出江西省男女个数,广东省男生个数,浙江省
- 编解码器在字符与字节之间的转换过程称为编解码,Python自带了超过100种编解码器,比如:ascii(英文体系)gb2312(中文体系)u
- 超链接在新窗口打开,是在<a>标签加 target="_blank" 即可。可按下“POST/GET提交按钮
- 本文实例讲述了Python利用前序和中序遍历结果重建二叉树的方法。分享给大家供大家参考,具体如下:题目:输入某二叉树的前序遍历和中序遍历的结
- 1、通过探测Flash Player的版本,来决定显示Flash内容还是替换内容,避免了过时的Flash插件影响Flash内容的正常显示。2
- 一:最近,经常碰到有网友问,如何使vbscript和javascipt传递变量。不知道为什么要这么做。因为每一种脚本语言几乎都可以完成所需要