React Axios 请求解决跨域问题

秒速五厘米 2022-09-10 02:29 341阅读 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/

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axios跨域请求携带cookie

cookie的作用域只和domain与path有关，与端口无关。但是使用axios发起跨域请求时，需要设置withCredentials:true 配置属性才能生效。

缺乏、安全感/ 2023年10月12日 11:27/ 0 赞/ 61 阅读

相关 axios请求“跨域”的解决方案

背景：困扰了好几个小时的问题。启动项目后，页面内容如论如何都不出现，接口没有请求成功。看了一下控制台报了下面错误。 Access to XMLHttpRequ

比眉伴天荒/ 2023年07月12日 03:42/ 0 赞/ 40 阅读

相关解决Axios跨域问题（Axios跨域问题解决方案）

问题背景 Axios是不允许跨域访问的，别说跨域，跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8889`，Java后台 backEnd

以你之姓@/ 2023年02月25日 08:38/ 0 赞/ 40 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 140 阅读

相关 axios请求，跨域问题，设置跨域代理

生成一个vue项目之后，开始写请求，请求数据，渲染到前端界面，有时候直接请求服务器上的接口，会遇到跨域问题，遇到跨域的时候，需要设置跨域代理~ 1：进入新建的项目之中，使用n

今天药忘吃喽~/ 2022年12月22日 00:57/ 0 赞/ 317 阅读

相关解决请求跨域问题

目录跨域常见的几种情况前端vue解决axios的跨域问题后端springboot解决跨域问题

古城微笑少年丶/ 2022年12月02日 15:06/ 0 赞/ 284 阅读

相关 React Axios 请求解决跨域问题

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

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 342 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

墨蓝/ 2022年05月15日 00:43/ 0 赞/ 500 阅读

相关 React代理请求解决跨域问题

假设下面的常量存放的地址是我们请求的地址 const endPointURI = ‘[https://08ad1pao69.execute-api.us-east-1.am

绝地灬酷狼/ 2022年04月24日 16:30/ 0 赞/ 350 阅读

相关前后分离---axios解决跨域问题

统一用户平台接口调整修改谈到跨域，首先得了解CORS（Cross origin resource sharing）跨域资源共享，它是w3c的一个标准，是一份浏

末蓝、/ 2021年11月16日 17:10/ 0 赞/ 497 阅读