1. 正常运行 npm run eject 暴露项目的配置文件 (前三个步骤可省略,最好的是按照第四步操作)

  在config/webpackDevServer.config文件下,大概在104行

1     proxy: {
2 '/api': {
3 target: 'https://i.news.qq.com/trpc.qqnews_web.pc_base_srv.base_http_proxy',
4 changeOrigin: true,
5 pathRewrite: {
6 '^/api': ''
7 }
8 }
9 }

2. create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置(我现在是3的版本), 配置成如下:

1 "proxy":{
2 "/fans/**":{
3 "target":"https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
4 "changeOrigin": true
5 }
6 }

3. create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型, 配置成如下:

1 "proxy": "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",

4. 更好的配置,建立 src/setupProxy.js 文件,npm 安装 install http-proxy-middleware , 配置成如下:(可配置多个代理)

 1 const proxy = require("http-proxy-middleware");
2
3 module.exports = function(app) {
4 app.use(
5 proxy("/base/**", {
6 target: "http://45.32.15.21:8090/",
7 changeOrigin: true
8 })
9 );
10 app.use(
11 proxy("/fans/**", {
12 target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
13 changeOrigin: true
14 })
15 );
16 };

create-react-app 构建的项目使用代理 proxy 解决跨域请求的更多相关文章

  1. react 设置代理(proxy) 实现跨域请求

    一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...

  2. vue访问外部接口设置代理,解决跨域(vue-cli3.0)

    vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...

  3. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  4. Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...

  5. 【Node】node.js实现服务器的反向代理,解决跨域问题

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  6. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  7. nuxt.js axios使用poxyTable代理,解决跨域问题

    1 安装(@gauseen/nuxt-proxy) cnpm install @gauseen/nuxt-proxy --save 2 配置nuxt.config.js modules: [ // 请 ...

  8. vue项目开发时怎么解决跨域

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

  9. vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作

    const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...

  10. vue反向代理(解决跨域)

    1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...

随机推荐

  1. [问题解决]Win32- OPENFILENAME 结构体报错或者找不到情况

    问题:OPENFILENAME结构体.GetOpenFileName()和 GetSaveFileName()函数都找不到了,在头文件<framework.h>中已经包含<windo ...

  2. LNK2001 无法解析的外部符号 "int const ROUND"

    今天在写代码时出现了这个错误,网上的解决方法都不合适 我的代码是这样,在一个cpp里申明了一个常量 //data.cpp const int ROUND = 3; 然后在一个头文件里申明为全局变量 / ...

  3. Weblogic禁用不安全的http请求

    参考链接: https://blog.csdn.net/linfanhehe/article/details/78470733

  4. margin:auto实现盒子水平垂直居中

    margin:auto为什么不垂直居中 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向上应该获得的剩余空间大小. 行内元素margin:auto; 不能水平居中在一行的中央位置 ...

  5. 文件搜索失败:cannot update repo 'Media": No LRO_ URLS, LRO_MIRRORLISTURL nOr LRO _METALINKURL specified

    配置yum源 1.产看当前系统版本 cat /etc/redhat-release 2.进入/etc/yum.repos.d目录,新建bak目录,将系统自带的yum移到bak目录 cd /etc/yu ...

  6. Rethinking Table Recognition using Graph Neural Networks

    摘要:CNN用来视觉特征提取:图网络用来处理结构问题:由于缺少大量的数据,作者建立了一个合成数据集的数据库. 关键词:表格识别,结果分析:图神经网络,文档模型:图模型:数据库 源码地址;https:/ ...

  7. 痞子衡嵌入式:我为2021 TencentOS Tiny AIoT应用创新大赛做了场直播培训

    TencentOS Tiny AIoT 应用创新大赛是腾讯 TencentOS 团队联合恩智浦半导体.安谋科技(Arm China)发起的线上开发者活动,主要面向中小企业嵌入式工程师.广大嵌入式开发者 ...

  8. kubernetes集成GPU原理

    这里以Nvidia GPU设备如何在Kubernetes中管理调度为例研究, 工作流程分为以下两个方面: 如何在容器中使用GPU Kubernetes 如何调度GPU 容器中使用GPU 想要在容器中的 ...

  9. 坚叔:让科幻片的概念变成产品丨编程挑战赛 x 嘉宾分享

    前言 本文基于资深创业者@坚叔在「RTE 2022 创新编程挑战赛」宣讲活动中分享内容二次整理. 嘉宾简介:陈坚(坚叔),国内二次元 AR/VR 资深创业者,国内第一批空间虚拟数字化从业人员,获得政府 ...

  10. 人人皆可虚拟,直播还能这么玩?声网推出 MetaLive 元直播解决方案

    视频群聊.在线社交.电商带货.游戏竞技.......越来越多的场景融入了直播这一功能.无可厚非,直播可以拉近人与人间的距离,让彼此间的交流更具象.但传统直播场景更为强调主播个人的表现,用户多以围观.刷 ...