vue和thinkphp跨域问题

跨域问题

解决方法有很多,以下都可以,jsonp很早之前使用的,不用了.

1. 前端使用vue在开发阶段可以使用代理方式
   https://www.cnblogs.com/lihaohua/p/12372267.html

2. 生产环境,flask框架,可以配置nginx反向代理
   https://www.cnblogs.com/mmzuo-798/p/10871750.html
   如,前端代码中请求接口固定为 /api/
   nginx中配置反向代理

配置路由只需配置到网关上，网关会自动转发到相应的服务器上
location /api/ { // api请求头部前缀
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://192.168.0.104:7995;
}

3. thinkadmin框架,ThinkAdmin v5 是一个基于 ThinkPHP 5.1 和 ThinkLibrary 开发的后台管理系统.
   而ThinkLibrary实现了接口 CORS 跨域默认支持（输出 JSON 标准化）,所以使用这个框架默认已经可以跨域.

4. nginx跨域设置 cors
   https://www.jianshu.com/p/4da65de0c02b

解释

1. 请求头origin字段,只要是非同源或者POST请求都会带上Origin字段
2. nginx或代码中判断origin的值为白名单,就增加响应头,
   add_header Access-Control-Allow-Origin $cors_origin always;
   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
   add_header Access-Control-Allow-Credentials true always;
   add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
   add_header Access-Control-Max-Age 1728000 always;