项目中,js遇到axios跨域请求,这种错误:
Access to XMLHttpRequest at 'http://x.x.x:3000/api/add' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
解决方案
跨域配置:
$.ajax({
url: url,
data: reqData,
//默认为json格式,不提供其它格式
dataType: 'json',
//超时30秒
timeout: 30000,
//后台如果关闭OPTIONS, 前端的请求必须是简单类型
type: "Post",
headers: {
//允许所有来源访问
'Access-Control-Allow-Origin': "*",
//用于判断request来自ajax还是传统请求
'Access-Control-Allow-Headers': "Origin, X-Requested-With, Content-Type, Accept",
//允许访问的方式
'Access-Control-Allow-Methods': "PUT,POST,GET,DELETE,OPTIONS",
//修改程序信息与版本
'X-Powered-By': "3.2.1",
//内容类型:如果是post请求必须指定这个属性
'Content-Type': "application/json; charset=utf-8",
},
// beforeSend: function(xhr){xhr.setRequestHeader('token', androidToken);},
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function (res) {}}}
当ContentType为application/json,会分两次发送请求。
第一次,先发送method为options的请求到服务器,这个请求会询问服务器支持哪些请求方法(get,post等),支持哪些请求头等服务器的支持情况。
等到这个请求返回后,如果我们准备发送的请求符合服务器规则,那么才会继续发送第二次请求,否则会在console中报错。