React Axios 请求解决跨域问题

秒速五厘米 2022-09-10 02:29 323阅读 0赞

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios ,第一次...

废话就不说了，我们来看第一步：

安装：axios 和 http-proxy-middleware

cnpm i axios -D
    cnpm i http-proxy-middleware -D

第二步骤：配置proxy ，再src 目录下新建：setupProxy.js 内容如下：

const {createProxyMiddleware } = require('http-proxy-middleware')
     
    module.exports = function(app) {
     app.use(createProxyMiddleware('/api', { 
         target: 'http://localhost:8010',
         pathRewrite: {
           '^/api': '',
         },
         changeOrigin: true,
         secure: false
       }));
       app.use(createProxyMiddleware('/client', {
           target: 'http://localhost:8010',
           pathRewrite: {
             '^/client': '',
           },
           changeOrigin: true,
           secure: false
       }));
    }

当然上面我配置的地址是我自己使用的，你要配置你自己的地址

第三步：axios 请求后台接口

后台的接口地址：[http://localhost:8010/][http_localhost_8010]indexframe/getviewjson/

<div style={
       {height: '100vh',border: '1px solid #ddd'}}>
    		     <Button type="primary" onClick={()=>{this.getMenuData('Hello world')}}>按钮 
         </Button>
        </div>
        ......
        getMenuData(props){
    	     Axios.post('/api/indexframe/getviewjson').then(res =>{
    	         console.log(res)
    	      })
    	}

上面就是使用Axios 调用后台接口，以及跨域的解决办法

希望对你有所帮助

[http_localhost_8010]: http://localhost:8010/