Python Sanic chrome CORS

Posted on

使用sanic 框架 用vue-axiso发出请求在Chrome 的console 中报 Access to XMLHttpRequest at ‘http://xxxxxxxx' from origin ‘null’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. 和 ‘Access-Control-Allow-Origin’ 跨域问题

主要是chrome的安全限制跨站请求需要同源，或者就需要在服务端设置返回头以允许跨站请求。在sanic中，之间用中间件方法，对请求和返回进行统一添加头，对post前的option预检请求进行相应即可，具体代码片段：

1
2
3
4
5
6
7
8
9
10
11
@app.middleware('request')
async def print_on_request(request):
    if request.method == 'OPTIONS':
        return response.json(None)  

@app.middleware('response')
async def prevent_xss(request, response):
    if 'X-Error-Code' not in dict(response.headers):
        response.headers['X-Error-Code'] = 0
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Headers"] = "X-Custom-Header,content-type"

参考资料：
跨域资源共享 CORS 详解 ： http://www.ruanyifeng.com/blog/2016/04/cors.html
Sanic 中间件 和 监听器 ：https://sanic-cn.readthedocs.io/zh/latest/sanic/middleware.html#