帝王谷资源网

react axios 跨域访问一个或多个域名问题
网络编程 2024/12/27 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

1.react + axios 跨域访问一个域名

配置非常简单，只需要在当前的 package.json 文件里面配置：

"proxy":"http://iot-demo-web-dev.autel.com", //当然，这里是一个假地址

像这样：

react axios 跨域访问一个或多个域名问题

这样跨域便完成了，当然，也可以像网上那样，多几段代码，像这样：

react axios 跨域访问一个或多个域名问题

我不知道你们写入这段代码会怎么样，反正我是会报错，具体报错是怎么我这里没办法展示，因为我的项目已经 运行了 npm run eject 这个命令

报错的意思大概就是 proxy 希望得到的是一个字符串，而现在得到的是一个对象，所已我只能采取 第一张图片的方法进行跨域

而后我们安装axios ，当然，其他的也行，在 src 目录项目建一个 api文件， 再在api文件里面建一个 user.js 写上下面这段代码

import axios from 'axios'

export function _user(data) {
 return axios.get('device/detail', data)
}

我这里的跨域使用的是第一张图片上的那种跨域

在你需要发送请求的地方写上以下代码：

import { _user } from '../api/user'

 componentDidMount() {
 let res = _user({})
 console.log(res)
 }

接下来咱们就能愉快的获得后台给我们的数据了

上面的那种跨域呢，可以说是非常方便，但是吧，如果后台给我们两个甚至三个不同的域名呢   怎么办，那我们就得使用插件

2.react +axios 跨域访问多个域名

安装插件：npm install --save http-proxy-middleware

安装好了之后咱们是开始配置啦：

1.首先暂时运行命令将配置暴露出来

npm run eject
or
yarn eject

在这里你可能会遇到一个报错：

react axios 跨域访问一个或多个域名问题

那这个时候你可以将报错百度一下，或者跟着我继续操作

报错的原因呢是因为咱们在使用脚手架搭建 react 时，系统会自动给我们添加一个 .gitignore 文件，如果你没有提交到仓库过，你就需要先提交到仓库

react axios 跨域访问一个或多个域名问题

完成这两步之后就可以继续 命名 npm run eject ，等配置文件暴露完成之后，你的 package.json 可能非常多配置，咱们不用管，在 src 下面建一个 setupProxy.js 在里面写上下面代码：

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
 createProxyMiddleware('/api', {
  target: 'http://iot-demo-web-server-dev.autel.com',
  changeOrigin: true,
 })
 )
 app.use(
 '/sys',
  createProxyMiddleware({
  target: 'http://localhost:5001',
  changeOrigin: true,
 })
 );
}

找到 scripts 路径 打开 strat.js

react axios 跨域访问一个或多个域名问题

在第 117行左右 协商下面代码：

require('../src/setupProxy')(devServer) //注意路径是否正，是你刚才建的那个文件

react axios 跨域访问一个或多个域名问题

如此 多个跨域便成功了，值得注意的就是， 需要在你请求的具体路径前面加上 api 或 sys 像这样

react axios 跨域访问一个或多个域名问题

总结

标签：
react,axios,跨域,react,axios,跨域域名
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接