React的跨域问题处理

适合于react17+的版本

第一步:在package.json里面加proxy

这个proxy必须要是String类型,并且是本地需要跨域的路径

"proxy": "http://localhost:3000"

第二步:设置setupProxy.js, 设置跨域路径设置

在src下面,新建setupProxy.js,代码如下

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function (app) {
//   app.use(
//     createProxyMiddleware("/apis", {
//       target: "https://xxx.xxx.cn",		// 需要跨域的网址
//       changeOrigin: true,     //跨域
//     })
//   )
app.use(
    createProxyMiddleware("/api", {  //   这个/api,就是识别的请求路径拼接,告诉请求,当什么请求时,需要用到这里跨域
      target: "https://c.m.163.com/ug",
      changeOrigin: true,     //跨域
    })
  )
}

然后就ok啦~

可以跨域请求鸟

import React from 'react'
import ReactDom from 'react-dom'
import axios from 'axios'

(async function() {
  const url = '/api/wuhan/app/data/list-total?t=' + new Date().getTime()
  const res = await axios.get(url)
  console.log(res)
}())

\

第二步有一个深坑 (React中代理异常Proxy is not a function)

问题:官方给出的proxy配置文档 (https://www.html.cn/create-react-app/docs/proxying-api-requests-in-development/)

如下

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://xxx.xxx.com' }));
};

启动报错如下

proxy is not a function
error Command failed with exit code 1.

解决方案:查询npm的http-proxy-middleware,发现1.x做了较大改动。

文档(https://www.npmjs.com/package/http-proxy-middleware)

正确写法:

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000/' }));
};

// 或者

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy.createProxyMiddleware('/api', { target: 'http://localhost:5000/' }));
};

片尾:http.js配置

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

axios.defaults.baseURL = 'https://c.m.163.com/ug/'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000

let http = { post: '', get: '' }

http.post = (api, data) => {
    const params = qs.stringify(data)
    return new Promise((resolve, reject) => {
        axios.post(api, params).then(r => {
            resolve(r)
        }).catch(e => {
            reject(e)
        })
    })
}

http.get = (api, data) => {
    const params = qs.stringify(data)
    return new Promise((resolve, reject) =>{
        axios.get(api, params).then(r => {
            resolve(r)
        }).catch(e => {
            reject(e)
        })
    })
}

export default http

最后

公众号:小何成长,佛系更文,都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦,我是:何小玍。大家一起进步鸭

最近有点忙,文章可能有点水,有问题大家可以关注我公众号,一起交流

注释都写到代码里面了,望见谅

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值