This is the 20th day of my participation in the August More Text Challenge

Suitable for release 17+

Step 1: Add proxy to package.json

The proxy must be of type String and be a local path that needs to cross domains

"proxy": "http://localhost:3000"
Copy the code

Step 2: Set up setupproxy. js and set cross-domain path Settings

Under SRC, create setupproxy.js with the following code

const {createProxyMiddleware} = require("http-proxy-middleware"); module.exports = function (app) { // app.use( // createProxyMiddleware("/apis", { // target: "https://xxx.xxx.cn", // need cross-domain url // changeOrigin: True, // cross-domain //}) //) app.use(createProxyMiddleware("/ API ", {// this/API is a path that identifies requests that need to be used when they need it. Cross-domain target: "Https://c.m.163.com/ug", changeOrigin: true, / / cross domain}}))Copy the code

Then ok ~

Birds can be requested across domains

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) }())Copy the code

\

React Proxy is not a function

Question: Official proxy configuration document (www.html.cn/create-reac…)

The following

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

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

The startup error is as follows

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

Solution: Query HTTP-proxy-middleware for NPM and find a major change to 1.x.

Document (www.npmjs.com/package/htt.)

Correct way to write:

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/' })); };Copy the code

Epilogue: http.js configuration

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
Copy the code

The last

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Recently a little busy, the article may be a little water, have a problem we can pay attention to my public number, exchange together

Comments are written into the code, please forgive me