flask-cors php,vue flask 跨域问题

最近一直忙着检查点测试平台的开发。之前主要是从事后端开发，现在所有的东西都需要自己一个人撸。也遇到了之前在后端服务开发中未碰到的问题，在此记录下解决的全过程。

前端采用vue + element的技术，开发完成后生成静态文件扔到nginx服务器上。后端用python的flask，完成之后放到gunicorn中。两个单独开发到没有什么太大问题，问题就出在将两个合在一起的时。

第一次合并的时候出现了下面的问题，额。。。跨域问题，问题不大改改后台的响应就ok，就写了一个简单的装饰器

装饰器代码：

defmkrp(func):

@functools.wraps(func)def wrapper(*args, **kw):

repjson= func(*args, **kw)

response=make_response(repjson)

response.headers[‘Access-Control-Allow-Origin‘] = ‘*‘response.headers[‘Access-Control-Allow-Methods‘] = ‘PUT,GET,POST,DELETE,OPTIONS‘

returnresponsereturn wrapper

然后就是见证奇迹的时刻，果然页面正常，部分请求都好了。但好景不长，为啥post请求全跪了呢，还都是上面的问题，wtf

在chrome的开发者工具中查看请求信息，发现所有的post请求之前，都会发一次 Request - Method:OPTIONS的请求，然后post请求就没发出，这玩意儿到底又是啥呢。

options请求类似于一个探针，在post请求前先去发送，然后根据Access-Control-*的返回，判断是否是否对指定站点有访问权限。然后网上找了各种资料，其中艰辛不表。

找的各种方案基本上不合适，不知道是不是我自己写的代码太low导致的。咨询了运维的兄弟，他直接让我走ngix转发，让两个后台的请求直接和前端地址再同一个域里面，nginx的配置如下：

server

{

listen8099;server_name mywebhost;index index.html index.htm index.php;root/usr/local/vue-dists/dist;location/{

try_files$uri $uri/ @router;index index.html;}

location @router {

rewrite ^.*$ /index.html last;}#access_log off;access_log logs/vue.log main;error_log logs/vue_error.log;location/python/{if ($request_method = ‘OPTIONS‘){

add_header ‘Access-Control-Allow-Origin‘ ‘*‘;add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;add_header ‘Content-Type‘ ‘text/plain‘;add_header ‘Content-Length‘0;

return 204;}if ($request_method = ‘POST‘){

add_header ‘Access-Control-Allow-Origin‘ ‘*‘;add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;}if ($request_method = ‘GET‘){

add_header ‘Access-Control-Allow-Origin‘ ‘*‘;add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘;}

proxy_pass http://myapihost:5000/;}

}

~

果然，这位仁兄的解决方案果然靠谱，跨域的问题全部解决。

但是问题是解决了，但是心中还有是有些不甘，咱毕竟是个有追求的开发者，不能这么认命，还是想通过服务端的方式来解决这个问题。不是post请求之前发了一个options的探针吗，咱就吧请求拦截了，你要啥，我返回啥。

看了下flask的官方文档，可以用before_request的装饰器来过滤拦截，上代码：

@app.before_requestdefoption_replay():if request.method ==‘OPTIONS‘:

resp=app.make_default_options_response()if ‘ACCESS_CONTROL_REQUEST_HEADERS‘ inrequest.headers:

resp.headers[‘Access-Control-Allow-Headers‘] = request.headers[‘ACCESS_CONTROL_REQUEST_HEADERS‘]

resp.headers[‘Access-Control-Allow-Methods‘] = request.headers[‘Access-Control-Request-Method‘]

resp.headers[‘Access-Control-Allow-Origin‘] = request.headers[‘Origin‘]returnresp

@app.after_requestdefset_allow_origin(resp):

h=resp.headersif request.method != ‘OPTIONS‘ and ‘Origin‘ inrequest.headers:

h[‘Access-Control-Allow-Origin‘] = request.headers[‘Origin‘]

其中我遇到了一个坑，对于响应头，我一开始只设置了all methods和allow orgin，返回还是怎都有问题，后来查了阮一峰大神的博客，找到相关内容，将allow headers加上去就木有问题了。

参考资料：http://www.ruanyifeng.com/blog/2016/04/cors.html