React跨域解决方案

一、业务场景：
前后端数据交互时会存在跨域的情况，这个时候就比较难受。传统的解决方案有三种，分别是
Jsonp：但是只能处理get请求
后端CSRF：配置注解@CrossOrigin（用的最多）
反向代理：纯前端处理跨域，其原理是利用后端没有跨域限制，咱们呢只负责请求自己的服务器，让自己的服务器请求要访问的服务器地址
二、解决方案：
新建处理跨域的文件（setupProxy.js），放入配置代码

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'https://i.maoyan.com',    //要访问的地址changeOrigin: true,}));// 可以代理多个// app.use(//     '/api',//     createProxyMiddleware({//         target: 'https://i.maoyan.com',//         changeOrigin: true,//     })// );
};

配置完毕后需做以下操作

（1）安装 http-proxy-middleware模块

npm i http-proxy-middleware --save

（2）发送请求

   axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E6%9D%AD%E5%B7%9E&ci=50&channelId=4').then((res) => {console.log(res).catch((err) => {console.log(err)})

（2）重启服务重启服务重启服务重要的事情说三遍

三、效果展示

今天的分享到此结束，欢迎小伙伴们一起交流

React跨域解决方案相关推荐

kuayu react_react跨域解决方案
react跨域解决方案 1.开发环境:react+axios+element 2.电脑系统:windows10专业版 3.在使用react开发的过程中,我们总是会遇到跨域的问题,下面我来分享一下,在r ...
跨域解决方案（史上最易懂）
跨域总结 1.跨域思路跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案通过前端解决的思想就是,通过设置中间件把跨域的请求转发一下,其实就是反向代理, 比如 http://1.2. ...
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持 1.设置 document.domain为一致推荐1 2.Apache 反向代理推荐1 3. ...
跨域解决方案一：使用CORS实现跨域
跨域解决方案一:使用CORS实现跨域参考文章: (1)跨域解决方案一:使用CORS实现跨域 (2)https://www.cnblogs.com/choon/p/5386150.html (3)ht ...
Mac上Chrome浏览器跨域解决方案
Mac上Chrome浏览器跨域解决方案参考文章: (1)Mac上Chrome浏览器跨域解决方案 (2)https://www.cnblogs.com/dxzg/p/9707639.html 备忘一下 ...
localStorage和cookie的跨域解决方案
localStorage和cookie的跨域解决方案参考文章: (1)localStorage和cookie的跨域解决方案 (2)https://www.cnblogs.com/vsmart/p/9 ...
html 跨域_常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
WEB 前端跨域解决方案
跨域定义广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
【安全系列之跨域】跨域解决方案
一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CS ...
js最全的十种跨域解决方案
在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...

React跨域解决方案

React跨域解决方案相关推荐

最新文章

热门文章