react+axios解决跨域问题【亲测】

react+axios解决跨域问题【亲测】

前提：axios，http-proxy-middleware 安装该插件
以下操作弄完后，必须服务重启，必须重启

1、在src目录下，创建setupProxy.js，并输入内容

//需要采用CommonJS的写法
const { createProxyMiddleware } = require(‘http-proxy-middleware’)

module.exports = function (app) {
app.use(createProxyMiddleware(‘/autoApi’, //遇见/api-elm前缀的请求,就会触发该代理配置
{
target: ‘http://127.0.0.1:8000’, //请求转发给谁（能返回数据的服务器地址）
changeOrigin: true //控制服务器收到的响应头中Host字段的值
// pathRewrite: { ‘^/autoApi’: ‘’ } //重写请求路径，保证交给后台服务器是正常地请求地址（必须配置）
}),
createProxyMiddleware(‘/api-news’,
{
target: ‘https://pacaio.match.qq.com’,
changeOrigin: true,
pathRewrite: { ‘^/api-news’: ‘’ }
}))

2、在src目录下 index.js中写上

import React, { Component } from "react";

// import ReactDOM from “react-dom/client”;
import ReactDOM from “react-dom”
// import ‘./index.css’;
import axios from ‘axios’

class App extends Component{

tryGet(){
// axios.get(‘http://127.0.0.1:8101/autoApi/demo2/?userid=1&pwd=2&date=3’,{params:{userid:1,pwd:2,date:3}})
axios.get(‘/autoApi/demo2/’,{params:{userid:1,pwd:2,date:3}})
.then(res=>{
console.log(res.data);
})
}
render(){
return(

hello 中国

                      
这是一个请求接口的按钮

)
}
}
const root00=ReactDOM.createRoot(document.getElementById(‘root’))
root00.render()
3、最后的效果：