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(
这是一个请求接口的按钮
)
}
}
const root00=ReactDOM.createRoot(document.getElementById(‘root’))
root00.render()
3、最后的效果: