跨域文件上传的时候,浏览器会自动发起一个 OPTIONS 方法到服务器,现在后台解决前端跨域解决前端跨域请求的问题

客户端发起的这个 OPTIONS 可以说是一个“预请求”,用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的,因为跨域提交数据对于服务器来说可能存在很大的安全问题

请求头 Access-Control-Request-Method 用于提醒服务器在接下来的请求中将会使用什么样的方法来发起请求

Access-Control-Allow-Method 和 Access-Control-Allow-Origin 分别告知客户端,服务器允许客户端用于跨域的方法和域名

示例

下载flask_cors 包

pip install flask-cors

使用flask_cors的CORS,代码示例

from flask_cors import *

app = Flask(__name__)
CORS(app, supports_credentials=True)

以下是Flask-CORS 的官方文档链接

http://flask-cors.readthedocs.io/en/latest/

实现

现在我们看看解决问题的实际案例

from flask_cors import CORS
app = Flask(__name__,)
# r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
CORS(app, resources=r'/*')
# 上传文件
@uploadFiles.route('/upload', methods=['POST'])
def uploadFile():
result_text = {"statusCode": 200,"message": "文件上传成功"}
response = make_response(jsonify(result_text))
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'OPTIONS,HEAD,GET,POST'
response.headers['Access-Control-Allow-Headers'] = 'x-requested-with'
return response

使用POSTMAN请求

遇到的问题

由于项目中路由是多级路由,通过主路由跳转到子路由,一开始的时候,允许跨域的配置在上传文件的子路由中进行设置,发现OPTIONS请求响应值中并没有返回预期的头文件,将跨域设置在主路由中设置即可

flask跨域请求的更多相关文章

  1. flask跨域请求三行代码搞定

    flask跨域请求三行代码就可以搞定.但是请注意几点: 第一:只能返回json格式数据,比如list.ndarray等都不可以 第二:返回的对象必须是是字符串.元组.响应实例或WSGI可调用. pyt ...

  2. flask 跨域请求

    Flask中,跨域请求主要有两种方式: 1.在响应头信息中添加允许跨域 如下,使用装饰器app.after_request(我这里的web是定义的蓝图),这样在每次请求后,加入header 2.使用第 ...

  3. Flask框架踩坑之ajax跨域请求

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...

  4. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  5. jquery实现ajax跨域请求

    1.跨域问题: 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 如: 项目一:p1.html <body> ...

  6. django之csrf_exempt解决跨域请求的问题

    一: from django.views.decorators.csrf import csrf_exempt # 获取微信返回的code信息 @csrf_exempt def wechat_auth ...

  7. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  8. 跨域请求——WebClient通过get和post请求api

    AJAX不可以实现跨域请求,经过特殊处理才行.一般后台可以通过WebClient实现跨域请求~ //get 请求        string url = string.Format("htt ...

  9. 原生js封装ajax,实现跨域请求

    描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...

随机推荐

  1. CorelDRAW中如何分布对象

    分布对象功能主要用来控制选择对象之间的距离,可以满足用户对均匀间距的要求,通常用于选择三个或三个以上的物体,将他们之间的距离平均分布.本教程将详解CorelDRAW中关于分布对象的操作. CorelD ...

  2. Redis集群版在Java中的应用

    1.配置redis集群 <?xml version="1.0" encoding="UTF-8"?> <redisCluster> &l ...

  3. RESTEasy maven使用

    添加依赖: <dependency> <groupId>org.jboss.resteasy</groupId> <artifactId>resteas ...

  4. Objective-C语法之动态类型(isKindOfClass, isMemberOfClass,id)等

    对象在运行时获取其类型的能力称为内省.内省可以有多种方法实现. 判断对象类型 -(BOOL) isKindOfClass: classObj 判断是否是这个类或者这个类的子类的实例/ 判断是否是这个类 ...

  5. Springboot启动后报错【This application has no explicit mapping for /error, so you are seeing this as a fallback····】

    This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Dec 1 ...

  6. 【虚拟机】安装vmtools之后任然不能在虚拟机和主机之间复制粘贴的问题

    一.卸载 ../bin/vmware-uninstall-tools.pl rm -rvf /usr/lib/vmware-tools apt-get install open-vm-tools-de ...

  7. 使用IEDA新建jsp项目以后使用javax.servlet.*报错

    新建一个jsp项目,然后再里面配置完了一切写了一个servlet的文件: 点击运行的时候出现了javax程序包不存在的错误,百度了许多都在说是tomcat的事情,吧tomcat/lib下面的servl ...

  8. 利用pdb获取未导出符号

      BOOL InitSymHandler(HANDLE hProc)   {   CHAR SymPath[MAX_PATH], CurDir[MAX_PATH];       GetCurrent ...

  9. JS缺失错误- Uncaught SyntaxError: Unexpected token <

    这种情况,表明,缺少js文件 解决方式:在文件夹下将缺少js文件补足

  10. Linux设备驱动剖析之SPI(四)

    781行之前没什么好说的,直接看783行,将work投入到工作队列里,然后就返回,在这里就可以回答之前为什么是异步的问题.以后在某个合适的时间里CPU会执行这个work指定的函数,这里是s3c64xx ...