axios POST 请求跨域问题

axios 请求中默认 headers 的 Content-Type 属性为 application/json 类型,这种类型在跨域时,浏览器会先发送 options 请求,如果服务器响应完全符合请求要求,浏览器则会发送真正的 post 请求。

而当 headers 的 Content-Type 属性是 application/x-www-form-urlencoded 时不会发送 options 请求,所以需要在 axios 请求拦截中配置 headers['Content-Type'] = 'application/x-www-form-urlencoded 。并将 post 的参数转换为序列化的 URL 形式,具体设置如下:

// qs 库,URL 参数与对象参数之间的互相转换// 这里只用到了 `stringify` 方法import { stringify } from 'qs';// 请求拦截axiosService.interceptors.request.use(  (config) => {      // 兼容 post 跨域问题    if (config.method === 'post') {          // 修改 Content-Type      config.headers['Content-Type'] =        'application/x-www-form-urlencoded';              // 将对象参数转换为序列化的 URL 形式(key=val&key=val)      config.data = stringify(config.data);    }    return config;  },  (error) => {    console.log(error);    return Promise.reject(error);  });

Content-Type 参数配置只会出现在 POSTPUT 请求中。
qs.parse 方法可以将 URL 参数解析成对象的形式。


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章