配置proxy解决跨域问题
时间:2020-01-14
本文章向大家介绍配置proxy解决跨域问题,主要包括配置proxy解决跨域问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用一个最简单的方法解决API资源请求跨域问题:http-proxy-middleware
http-proxy-middleware不需要自己安装,在安装webpack过程中,会自动依赖安装到你的node_modules文件夹下,如果你发现没有,那么请自行安装
npm install --save-dev http-proxy-middleware
1、前端部署了nodejs服务器,采用app.listen()启动前端服务器,那么你只需要在你的js中添加下面几行代码即可
假设你的前端服务器js文件叫做server.js
//导入proxy var proxy = require('http-proxy-middleware') //context可以是单个字符串,也可以是多个字符串数组,分别对应你需要代理的api,星号(*)表示匹配当前路径下面的所有api const context = [`/login`, `/admin/*`] //options可选的配置参数请自行看readme.md文档,通常只需要配置target,也就是你的api所属的域名。 const options = { target: 'http://www.xxx.com', changeOrigin: true } //将options对象用proxy封装起来,作为参数传递 const apiProxy = proxy(options) //现在你只需要执行这一行代码,当你访问需要跨域的api资源时,就可以成功访问到了。 app.use(context, apiProxy)
2、你可能没有前端node服务器,但是你用来webpack的devServer来启动前端项目,这个时候的配置跟上面类似。
(1)、在你的webpack.config.js里面添加proxy配置。
//导入proxy var proxy = require('http-proxy-middleware') //context可以是单个字符串,也可以是多个字符串数组,分别对应你需要代理的api,星号(*)表示匹配当前路径下面的所有api const context = [`/login`, `/admin/*`] module.exports = { devServer: { host: 'localhost', port: '3011', proxy: [ { context: context, target: 'https://www.xxx.com', secure: false } ] } }
(2)、Umi配置
解决跨域需要在webpack配置proxy,而umi没有weppack.config.js
是因为umi将webpack配置保存在.umirc.js的配置文件中。
所以我们需要在.umirc.js文件加上(或者修改target路径)
在.umirc.js
文件加上:
"proxy": { "/api": { //代理的api,要和nginx配置的一直 "target": "http://192.168.1.100:5000" "changeOrigin": true, "pathRewrite": function (path, req) { // 实用其他ip打开下面 // path = path.split('/'); // path[2] = 'default'; // return path.join('/'); // 支线代码 // if (IS_DEBUG) // path = path.replace('urrm', 'default'); return path; } } },
或者如果创建多个域
"proxy": { "/api/RoomApi": { "target": "http://open.douyucdn.cn", "changeOrigin":true }, "/api/v1":{ "target":"http://capi.douyucdn.cn", "changeOrigin":true } }
原文地址:https://www.cnblogs.com/zsy0712/p/12192297.html
- 国产SSL防火墙 – sslfw
- Android 之dragger使用
- Android图像处理 - 高斯模糊的原理及实现
- 走进科学:银行ATM机真的安全吗?
- 漏洞科普:对于XSS和CSRF你究竟了解多少
- 巧用Live Template,不仅能提升AS开发效率,还能装逼
- 黑了前男友网站:从找SQL注入到后台权限
- 扩展CakePHP的CacheHelper以使用缓存引擎
- 走进科学:酒店保险箱真的保险么?
- 利用xmlrpc.php对WordPress进行暴力破解攻击
- .Net中如何操作IIS
- Havex:以工控设备为狩猎目标的恶意软件
- 大规模异常滥用检测:基于局部敏感哈希算法——来自Uber Engineering的实践
- 浅谈php安全
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解android 人脸检测你一定会遇到的坑
- Android实战RecyclerView头部尾部添加方法示例
- android实现多线程断点续传功能
- Android 8.0 中如何实现视频通话的画中画模式的示例
- Android7.0开发实现Launcher3去掉应用抽屉的方法详解
- Android利用Paint自定义View实现进度条控件方法示例
- 前端科普系列(5):ESLint - 守住优雅的护城河
- 图的储存方式,链式前向星最简单实现方式 (边集数组)
- 技术前刊:PostgreSQL12 COPY和bulkloading提升
- 疯子的算法总结(八) 最短路算法+模板
- POJ - 2387 Til the Cows Come Home (最短路入门)
- POJ - 3074 Sudoku (搜索)剪枝+位运算优化
- C语言rand随机函数问题
- HDU - 1253 胜利大逃亡(搜索)
- Android7.0版本影响开发的改进分析