js Request header field content-type is not allowed by Access-Control-Allow-Headers

项目中,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中报错。

你可能感兴趣的:(Js,javascript)