问题背景:
vue axios 向后端发送post请求,从network中看到并无post请求,只有一个options的请求,状态码200
首先,看一下为什么会有options请求
在正式跨域的请求前,浏览器会根据需要,发起一个“PreFlight”(也就是Options请求),用来让服务端返回允许的方法(如get、post),被跨域访问的Origin(来源,或者域),还有是否需要Credentials(认证信息)
三种场景:
- 如果跨域的请求是Simple Request(简单请求 ),则不会触发“PreFlight”。Mozilla对于简单请求的要求是:
以下三项必须都成立:
- 只能是Get、Head、Post方法
- 除了浏览器自己在Http头上加的信息(如Connection、User-Agent),开发者只能加这几个:Accept、Accept-Language、Content-Type...
- Content-Type只能取这几个值:
application/x-www-form-urlencoded
multipart/form-data
text/plain
XHR对象对于HTTP跨域请求有三种:简单请求、Preflighted 请求、Preflighted 认证请求。简单请求不需要发送OPTIONS嗅探请求,但只能按发送简单的GET、HEAD或POST请求,且不能自定义HTTP Headers(eg:token)。Preflighted 请求和认证请求,XHR会首先发送一个OPTIONS嗅探请求,然后XHR会根据OPTIONS请求返回的Access-Control-*等头信息判断是否有对指定站点的访问权限,并最终决定是否发送实际请求信息。
那么我的get请求呢?
原来,产生 OPTIOINS 请求的原因是:自定义 Headers 头信息导致的。
浏览器会去向 Server 端发送一个 OPTIONS 请求,看 Server 返回的 "Access-Control-Allow-Headers" 是否有自定义的 header 字段。因为我之前没有返回自定义的字段,所以,默认是不允许的,造成了客户端没办法拿到数据。
接口允许允许跨域请求:
header('Access-Control-Allow-Origin:*'); //支持全域名访问,不安全,部署后需要限制为R.com
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http动作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。
前端发起跨域请求:就是正常的$.ajax请求即可。我的项目用的vue全家桶 用的axios 发送的请求
// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] =`token:${getToken()}`
config.headers['Username'] =`getUsername()`
}
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
那么这样 的话如果后端是python的话
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + (
'Authorization,Username'
)
前端继续使用vue 的proxy代理即可。