[Python] Sanic chrome XMLHttpRequest CORS Access-Control-Allow-Headers 问题

Python Sanic chrome CORS

使用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中请求不到数据在firefox中可以，option请求后没有发出post请求等问题....

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

 

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