react项目中利用‘axios‘ 跨域提交表单

最新推荐文章于 2022-10-28 14:56:58 发布

啄木鸟哥哥

最新推荐文章于 2022-10-28 14:56:58 发布

阅读量541

点赞数

分类专栏： reaact 文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/wangzhichaogege/article/details/108791433

版权

reaact 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用axios和qs库实现跨域表单提交，并提供了React应用中跨域配置的具体方法。通过修改.roadhogrc.js文件设置代理，可以轻松解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios'
import qs from 'qs'

//这个qs很重要 是转换formData的工具


   axios.post(
      `${cognostest}/bi/v1/disp`,
       qs.stringify(‘这里放你要转换的表单数据，只有这样才能作为表单提交’),
      { headers:{ 'Content-Type':'application/x-www-form-urlencoded' }},
    )

另外还有react跨域的配置方法

修改.roadhogrc.js 这个文件

//这里是我配置的跨域代理

  "proxy": {
    "/api/v1/weather": {
      "target": "https://xxxx.com/",
      "changeOrigin": true,
      "pathRewrite": { "^/api/v1/weather" : "/v3/weather" }
    },
    "/api/v2": {
      "target": "http://localhost:8083",
      "changeOrigin": true,
      "pathRewrite": { "^/api/v2" : "" }
    },
     "/cognostest": {
      "target": "http://xxxxx:9300",
      "changeOrigin": true,
      "pathRewrite": { "^/cognostest" : "" }
    },
  },

这样就能做到跨域提交表单了