React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对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/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 调用后台接口，以及跨域的解决办法

希望对你有所帮助

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

vue如何解决axios请求前端跨域问题
一.为什么会出现跨域的问题? 跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域. 在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题.跨域问 ...
axios如何解决跨域的方案
由于解决跨域需要用到headers属性,所以在axios形参中需要用对象形式包裹,同时api接口也要放在url属性当中, 废话不多说,直接上代码,然后在请求接口 ---- 到浏览器的控制台 - 点击刚 ...
axios请求mysql_接收post请求（vue+axios）解决跨域问题（三）
1.通过postman测试post请求新建一个接收post的路由 //根据post的id查询 var selId='select * from list where id=?' //响应post r ...
uni-app之网络请求解决跨域
一:uniapp网络请求第一步:新建uni-app项目第二步:在npmjs中下载第三方包(用于请求) 安装步骤链接如下: @escook/request-miniprogram - npm 1.打 ...
AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
react-17.x版本，解决跨域问题的多种方式
react最新版本解决跨域问题废话少说,直接上答案: react测试版本:17.x 后端接口:http://127.0.0.1:9092/user 前端端口:http://127.0.0.1:300 ...
介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径
什么是同源?什么是跨域? 客户端向服务器发送请求的时候,如果协议,域名(IP)和端口都一样,则称为同源,但凡有一个不一样则跨域,跨域请求默认受到浏览器的安全策略的限制,浏览器会给出相应的错误信息,对于 ...

React Axios 请求解决跨域问题

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

最新文章

热门文章