React的跨域问题处理

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

适合于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配置文档 （www.html.cn/create-reac…）

如下

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做了较大改动。

文档（www.npmjs.com/package/htt…）

正确写法：

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

最后

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

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

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

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