vue请求跨域问题

Question

请问各位大佬,vue,axios发送请求的时候如果参数直接写在url里面就可以请求成功, 但是单独分开写就会报错是啥原因?
后端java已经设置允许了跨域请求的

这里是分开写参数的时候,就会报错

这里是把参数直接写在url里面的时候,可以请求成功....

Answer 1

虽然你的请求方法是 POST，但如果你的 Content-Type 不是 application/x-www-form-urlencoded 而是 application/json 的时候，也属于非简单请求，前者能成功是因为表单可以发出跨域请求，后者失败是因为非简单请求对服务器有特殊要求，在正式请求之前，浏览器会用 OPTIONS 方法发送一次 HTTP 查询请求（预检请求），先询问服务器，当前网页可以使用的头信息字段等服务器所支持的内容，只有得到肯定答复，浏览器才会发出正式的请求，否则就报错。

Answer 2

post 复杂请求触发 option 请求了吧。

然后你直接放入 url 应该没触发 option 请求。

可以查看一下 network

Answer 3

是不是出现了OPTIONS请求，有的话 也要加上跨域设置

Answer 4

axios请求类型修改即可，需要了解后台需要使用formData还是json进行传输；

formData设置，axios请求头headers设置application/x-www-form-urlencoded，data传参需要转string：

  headers: { 'content-type': 'application/x-www-form-urlencoded' }, // 请求头，发送FormData格式的数据，必须是 这种请求头。
  data: qs.stringify({mobile: '17664068406'}),  //发送请求要传的FormData参数。必须用 qs.stringify（）序列化一下。

json传输：

headers: { 'content-type': 'application/json' }

注意，一般java都使用session验证登陆，所以需要打开withCredentials：true

Answer 5

问题的原理楼上的都解释的挺清楚了，解决的办法是跟你做后端的哥们说一下，见到所有的OPTIONS请求都放行，这个问题不是前端来处理的，需要后端来解决。

Answer 6

因为使用 axios.post('/message', {phone: phone})，参数phone是会被带在 body 上而不是 url 上，此时不是一个简单请求。非简单请求会发起预校验，被后端拦截了下来

除了上面说的找后端配置 OPTIONS 请求放行外，还有一个方案就是

axios.post('/message', {
    params: {
        phone: phone
    }
})

这样来写，参数 phone 就会被 axios 解析到 url 里面了，就跟自己往 url 里面拼接是一样的效果