关于axios发送两次请求

因为vue-resource不在更新,vue推荐使用axios,所以使用axios。
在页面交互过程中,发现axios一定几率会发送两次请求,一次是自己设置的请求方式,还有一次是options。
关于这个问题,在各个网站寻求原因,得出以下结论:
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求。
关于这个问题,需要在后台进行设置,允许options请求,不然你的请求就会受到影响,后台并作出判断,如果请求方式为options,告诉它可以通讯,其他直接什么都不做。
以下是PHP做设置内容
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:content-type");
header("Access-Control-Request-Method:GET,POST");
if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
exit;
}

关于如何避免额外发送options请求的问题,尚在解决中。

已标记关键词 清除标记
配置请求头和请求拦截后,试验获取token值,但是post请求会变成get请求,同时多了一个http://www.139site.com/?e=dns&t=api.mars.net/router/token.htm的请求,config中跨域请求也配置好了,就是请求不出来,试过别的地址请求可以做到,就是想不通了 ``` import Qs from "qs"; import _vue from "@/main.js"; import axios from "axios"; import store from "@/store/index"; axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded"; axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest"; axios.defaults.withCredentials = true; axios.defaults.crossDomain = true; /** * 请求拦截器 */ axios.interceptors.request.use( config => { let token = window.sessionStorage.getItem("x_token"); config.data.x_token = token; config.data = Qs.stringify(config.data); return config; }, err => { return Promise.reject(err); } ); ``` ``` let baseUrls = baseUrl + "/token.htm"; // 获取 token const getToken = () => { // 清空 token window.sessionStorage.setItem("x_token", ""); axios .post(baseUrls, {}) .then(res => { if (res.success) { store.commit({ type: "getToken", x_token: res.data.x_token }); } else { getToken(); } }) .catch(res => { console.log(res); }); }; ``` 报错: Access to XMLHttpRequest at 'http://www.139site.com/?e=dns&t=api.mars.net/router/token.htm' (redirected from 'http://console.mars.net:81/baseUrl/token.htm') from origin 'http://console.mars.net:81' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页