react-17.x版本，解决跨域问题的多种方式

react最新版本解决跨域问题

废话少说，直接上答案：

react测试版本：17.x
后端接口：http://127.0.0.1:9092/user
前端端口：http://127.0.0.1:3000
注意：每种解决方式的请求路径有所不同

方式一：在前端项目package.json中添加（有效）

"proxy": "http://127.0.0.1:9092" //要请求的接口网址

前端请求写法：fetch(’/user’)
实际请求接口：“http://127.0.0.1:9092/user”

方式二：在前端项目package.json中添加（无效）
(react新版本报错：报错proxy必须为字符串，不再支持这种对象写法)

"proxy": {"/api": {"target": "http://127.0.0.1:9092","changeOrigin": true,"pathRewrite": {"^/api": ""}}
}

方式三：在前端项目中使用中间件http-proxy-middleware（有效）
react在项目启动时，会检测setupProxy.js文件是否存在，如果存在就会执行该文件，修改需要重新启动项目。

步骤：

安装：yarn add http-proxy-middleware -D
创建文件：src -> setupProxy.js（必须同名）

const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function (app) {app.use(createProxyMiddleware('/api', {target: 'http://127.0.0.1:9092',changeOrigin: true,pathRewrite: { '/api': '',  //因为后端接口没有api前缀，所以这里重写（去掉前缀/api）}}))
}

前端请求写法：fetch(’/api/user’) //必须加/api，否则无法命中
实际请求接口：“http://127.0.0.1:9092/user”

方式四：后端配置，在node-koa中使用koa-cors中间件配置（有效）

app.use(cors({origin: (ctx) => {const origin = ctx.headers.originreturn origin},allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],credentials: true,})
)

前端请求写法：fetch(‘http://127.0.0.1:9092/user’)
实际请求接口：“http://127.0.0.1:9092/user”

简单例子：

前端代码

import React, { useEffect } from 'react'function App() {useEffect(() => {fetch('/user')   //不同的方式修改这里，方式三还需要添加一个setupProxy.js文件，这里使用第一种方式.then(res => res.json()).then(res => {console.log(res)})})return (<div className="App">hello react</div>);
}export default App;

后端代码

const Koa = require('koa')
const app = new Koa()
const cors = require('koa-cors')
const Router = require('koa-router')
const router = new Router({prefix:'/user'})
const Mock = require('mockjs')router.get('/', (ctx) => {//此处是mock数据，与跨域无关const ret = Mock.mock({'user': {username: '@cname',sign:'@cword(8, 20)','age|18-100':18,'money|1-10000.2':1,'family|2-4':{father:'@cname',mother:'@cname',brother:'@cname',sister:'@cname'},'friends|1-3':['@last'],avatar: `@image('100×100','#50B347', '#FFF', 'Mock.js')`,isMarry:'@boolean',seniority:'@range(3, 7)',birthday:'@date',Address: `${'@region()'} - ${'@city(true)'}`,'score|1-5':'★'},})ctx.body = {status: 200,data: ret}
})app.use(router.routes()).use(router.allowedMethods())//如果使用后端跨域，开启这里
// app.use(
//     cors({//         origin: (ctx) => {//             const origin = ctx.headers.origin
//             console.log(origin);
//             return origin
//         },
//         allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
//         credentials: true,
//     })
// )app.listen(9092, () => {console.log('app is running on 9092 port')
})

请求结果

浏览器Network中显示的请求的路径是http:127.0.0.1:3000/user
但proxy已经帮转发到后端接口http:127.0.0.1:9092/user

完结：是否解决你的问题了呢？心情舒坦否？撒花。

react-17.x版本，解决跨域问题的多种方式相关推荐

【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
SpringBoot解决跨域的5种方式
本文来说下SpringBoot中实现跨域的5种方式. 文章目录什么是跨域 java解决CORS跨域请求的方式返回新的CorsFilter(全局跨域) 重写WebMvcConfigurer(全局跨域 ...
解决Vue前后端跨域问题的多种方式
1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
什么是同源策略及解决跨域的三种方式
同源策略 1.1.1 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略/SOP(Same origin policy)是一种约 ...
SpringBoot解决跨域问题的六种方式
一.同源策略同源,就是咱们域名.端口号.ip.采用的协议都相同,那么我们就是同源的反之就是不同源的!!! 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览 ...
springboot项目解决跨域的几种方式
跨域资源共享(CORS):通过修改Http协议header的方式,实现跨域.说的简单点就是,通过设置HTTP的响应头信息,告知浏览器哪些情况在不符合同源策略的条件下也可以跨域访问,浏览器通过解析Htt ...
React配置代理proxy解决跨域问题
一.在package.json中直接设置proxy 和Vue不同,React是在package.json文件中使用proxy配置注意: create-react-app脚手架低于2.0版本时候,可以 ...
react脚手架配置代理解决跨域问题
一.问题描述: 控制台报错,出现跨域问题二.解决方案配置代理: 第一种配置方式: 在package.json中追加如下配置 "proxy":"http://local ...
chrome 91版本解决跨域请求SameSite
个人网站 https://kuangyx.cn 91版本之前地址栏输入chrome://flags并回车搜索栏中输入SameSite by default cookies搜索,会有两项设置改为D ...

react-17.x版本，解决跨域问题的多种方式

react最新版本解决跨域问题

react-17.x版本，解决跨域问题的多种方式相关推荐

最新文章

热门文章