create-react-app 构建的项目使用代理 proxy 解决跨域请求
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 解决跨域请求的更多相关文章
- react 设置代理(proxy) 实现跨域请求
一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...
- vue访问外部接口设置代理,解决跨域(vue-cli3.0)
vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...
- 简单配置nginx反向代理,实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...
- Webpack 开发服务器代理设置解决跨域问题
在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...
- 【Node】node.js实现服务器的反向代理,解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- nuxt.js axios使用poxyTable代理,解决跨域问题
1 安装(@gauseen/nuxt-proxy) cnpm install @gauseen/nuxt-proxy --save 2 配置nuxt.config.js modules: [ // 请 ...
- vue项目开发时怎么解决跨域
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- vue反向代理(解决跨域)
1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...
随机推荐
- 使用angular/cli新建一个angular项目
1.打开cmd,进入你代码保存的文件夹,你想把新建的项目保存在哪个文件夹,即进入哪个文件夹: 我把文件放到这里: 然后,使用下面的命令创建项目: // ng new 项目名称,如下示例:创建名为 he ...
- GameObject.Find()、Transform.Find()查找游戏对象
GameObject.Find 按广度进行查找 GameObject.Find("GameObject"); GameObject.Find("GameObject/Ch ...
- java8-并行计算
java8提供一个fork/join framework,fork/join框架是ExecutorService接口的一个实现,它可以帮助你充分利用你电脑中的多核处理器,它的设计理念是将一个任务分割成 ...
- 网络安全(中职组)-B模块:暴力破解
任务环境说明: 服务器场景名称:sql008 服务器场景用户名:administrator:密码:未知(封闭靶机) 1.使用渗透机场景kali中工具扫描服务器场景,将iis的版本号作为flag提交: ...
- JAVA重试机制多种方式深入浅出
重试机制在分布式系统中,或者调用外部接口中,都是十分重要的. 重试机制可以保护系统减少因网络波动.依赖服务短暂性不可用带来的影响,让系统能更稳定的运行的一种保护机制. 为了方便说明,先假设我们想要进行 ...
- Android笔记--FileProvider
FileProvider介绍 继承于ContentProvider,本质上依旧是用于跨境通信,对第三方应用暴露文件,并授予文件读写地权限 具体内容 1.在Strings.xml里面配置一个常量 2.在 ...
- 无法下载外网Docker镜像的解决方案
概述 在安装k8s相关组件时经常会遇到需要下载一些外网的Docker镜像仓库,比如k8s的一个NFS存储类k8s.gcr.io/sig-storage/nfs-subdir-external-prov ...
- Jetson Xavier NX 试玩 (一)
Jetson Xavier NX 试玩 (一) 环境搭建 0 前言 NVIDIA家的Jetson系列是业内嵌入式边缘计算机的代表作,体积小,功能强是其最主要的优点. 学院入手了一款Jeston Xav ...
- CAS 6.x + Delegated Authentication SAML2.0 配置记录
最近领导派了一个活儿, 需要把我们CAS系统的身份识别交给甲方的系统, 甲方的系统是SAML2.0的协议. 由于之前对SAML2.0协议了解不多,折腾了不少时间,在这里记录一下.以后忘掉还可以看看. ...
- 中兴AX5400Pro+ BUG
中兴AX5400Pro+路由器管理页面已知两个功能出现BUG:1.[应用]栏目下的[父母控制]下的所有设置均不起作用.(更新固件V1.0.0.1B11.8000依然无效)2.[系统]栏目下的[备份配置 ...