当前位置: 首页 > 编程日记 > 正文

devServer proxy跨域 设置代理 proxy

概念
什么是同源策略

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
所谓同源是指:协议、域名、端口都相同

什么是跨域
跨域就是不同源,就是不满足协议、域名、端口都相同的约定
如:看下面的链接是否与 http://www.test.com/index.html 同源?

http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)

跨域请求devServer代理几种配置
1:先在项目的根目录下新建 vue.config.js 文件
2:在module.exports内设置devServer来处理代理

假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.test.com 相当于把请求换成 http://www.test.com/allin/policy/getProductInfo

第一种代理方式
把请求的url写成/allin/policy/getProductInfo

注意
请求的地址必须是/allin/policy/getProductInfo,而不是http://localhost:8081/allin/policy/getProductInfo,(下面的几种方式也是同样的)因为代理会检查请求开头是否为/allin,如果以http开头,则检查不匹配,则不走代理

 devServer: {proxy: {'/allin': {//要访问的跨域的域名target: 'http://www.test.com',ws: true, // 是否启用websockets//开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题changOrigin: true,}}
}

相当于遇见/allin才做代理,则会把默认域名http://localhost:8081地址改成 target 对应的http://www.test.com地址,但是在浏览器的F12下,Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo, 但是真正的请求的地址则是http://www.test.com/allin/policy/getProductInfo

注意
如果只是修改域名,则不需要写pathRewrite,但如果要写,则必须写成pathRewrite: {’^/allin’: ‘/allin’},相当于把/allin标识还替换成/allin

第二种代理方式
把请求的url写成/api/allin/policy/getProductInfo

 devServer: {proxy: {'/api': {//要访问的跨域的域名target: 'http://www.test.com',ws: true,changOrigin: true,pathRewrite: {'^/api': ''}}}}

相当于遇见/api才做代理,但真实的请求中没有/api,所以在pathRewrite中把’/api’去掉, 这样既有了标识, 又能在请求接口中把/api去掉

第三种代理方式
把请求的url写成/allin/getProductInfo

注意
这里请求时我没有写/polic,目的是在拦截跨域是我再加上

devServer: {proxy: {'/allin': {//要访问的跨域的api的域名target: 'http://www.test.com',ws: true,changOrigin: true,pathRewrite: {'^/allin': '/allin/policy'}}}
}

相当于遇见/allin则替换成/allin/policy,注意/policy后边没有/,这样拼接成功才会是http://www.test.com/allin/policy/getProductInfo

第四种代理方式
把请求的url写成/allin/getProductInfo
注意
这里请求时我没有写/polic,目的是在拦截跨域是我再加上

devServer: {proxy: {'/allin': {//要访问的跨域的api的域名target: 'http://www.test.com/allin/policy',ws: true,changOrigin: true,pathRewrite: {'^/allin': '/'  //必须这样写}}}}

这里/allin相当于http://www.test.com/allin/policy
这里必须要写pathRewrite: { ‘^/allin’: ‘/’},而且里边必须要写成’^/allin’: ‘/’,这里的斜杠代表的意思就是使用target中的/allin/policy,否则就要使用上面的方式把斜杠写成/allin/policy,并把target中只写域名,如果不写pathRewrite则请求不会成功。

注意
pathRewrite:如果不写则只能修改代理的域名,如果写则可以修改代理的域名和后边的路径

使用场景
我们开发的Vue项目大部分是用在App内的,而当我们写好一个功能后,如果想在真机上看看效果,那必须要提交到测试环境,然后App内配置好测试地址才可以正常访问。那我们能不能直接让App访问我们自己的IP地址呢,这样的话当在真机上出现问题时,可以先修改,避免了把错误的代码提交到测试环境上,而我们如果直接这么写,肯定会报跨域的问题,这里就需要用到代理机制了。我们就按照上面的几种方式设置代理就可以让App访问我们自己的机器上的代码了

相关文章:

转帖 开源游戏服务器调研

汇总贴 2013年优秀的开源引擎与开源游戏项目 http://mobile.51cto.com/aengine-431122.htm http://www.oschina.net/search?scopeproject&q%E6%89%8B%E6%B8%B8 当前的几种开源游戏服务端介绍 http://www.oschina.net/question/1986738_224669 用户贴,使用过后…

websockets_如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序

websocketsby Janitha Tennakoon通过詹妮莎特纳库恩 如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序 (How to build real-time applications using WebSockets with AWS API Gateway and Lambda) Recently AWS has announced the launch of a widely-r…

JS对象转URL参数

代码: /*** param 将要转为URL参数字符串的对象* key URL参数字符串的前缀* encode true/false 是否进行URL编码,默认为true* idx ,循环第几次,用&拼接* return URL参数字符串*/ var urlEncode (param,idx, key, encode)> {console.log(idx,idx…

Windows下Redis如何永久更改密码

公司使用的是Spring-session-redis 需要给Redis配置一个密码 本来我配置密码的方法是 先打开Redis服务 在采用 命令 CONFIG SET requirepass "密码" AUTH 密码 但是这样配置完密码之后再重启Redis服务密码会重置 也就是说每次打开Redis服务都要重新再配置一下密码 …

CEGUI-----动画

Animation XML files. <AnimationDefinition> <Affector name‘要被改变的属性名’ interpolator‘关键帧之间平滑过度的数值’> //specifies the name of a property that will be affected (have its value changed) as part of the animation <KeyFrame>…

react hooks使用_如何使用Hooks将React类组件转换为功能组件

react hooks使用by Balaganesh Damodaran通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to convert React class components to function components using Hooks) Over the course of the past month, I’ve spent a lot of time working with Re…

[精]Odoo 8.0深入浅出开发教程-模块开发基础

參考资料点击这里.构建Odoo模块模块组成业务对象业务对象声明为Python类, 由Odoo自己主动加载.数据文件XML或CSV文件格式, 在当中声明了元数据(视图或工作流)、配置数据(模块參数)、演示数据等.Web控制器处理Web浏览器发来的requests.静态web数据Web用到的图像, CSS或JavaScrip…

Java基础知识强化之IO流笔记41:字符流缓冲流之复制文本文件案例02(使用 [ newLine() / readLine() ] )(重要)...

1. 使用字符流缓冲流的特殊功能 [ newLine() / readLine() ] 需求&#xff1a;把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中 数据源&#xff1a; a.txt -- 读取数据 -- 字符转换流 -- InputStreamReader -- FileReader -- BufferedReader 目的地&#xff1a;…

Ant Design Pro 跳转路由 传参数,接收参数

umi/link 通过声明的方式做路由跳转。 例子: import Link from umi/link;export default () => {<div>/* 普通使用 */<Link to="/list">Go to list page</Link>/* 带参数 */<Link to="/list?a=b">Go to list page</Lin…

编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码

编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I’ve adopted a new philosophy that changes the way I make components. It’s not necessarily a new idea but rather a subtle new way of thinking.最近&#xff0c;我采用了一种新的理念&a…

js验证函数摘录

/**本文摘自&#xff1a;http://www.cnblogs.com/rob0121/articles/1776298.html* js各种表单数据验证*/ /**************************************************************************************/ /*************************************数字的验证*********************…

React for循环渲染组件

通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件,下面看看怎么实现: render() {const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);return (<SelectshowSearchvalue={this.state.value}placeholder={t…

让电脑的灵魂跟你走

想必我这个题目一出来&#xff0c;大家就知道我想写的是电脑远程控制了。 电脑远程控制是为了方便人们随时随地访问自己的电脑&#xff0c;从而进行更加灵活高效的工作。最常见的远程控制是我们利用客户端直接进入后台操作命令行界面。也就是终端shell。 电影里面&#xff0c;黑…

您尝试打开的文件_您是否尝试过重新打开软件团队的身份?

您尝试打开的文件by Victoriya Kalmanovich由Victoriya Kalmanovich 您是否尝试过重新打开软件团队的身份&#xff1f; (Have you tried turning your software team’s identity off and on again?) This series portrays my experience as an R&D group leader of a gr…

vijos 1006 晴天小猪历险记之Hill——数字三角形的终极变化

题目链接&#xff1a;https://vijos.org/p/1006 数字三角形原题看这里&#xff1a;http://www.cnblogs.com/huashanqingzhu/p/7326837.html 背景 在很久很久以前&#xff0c;有一个动物村庄&#xff0c;那里是猪的乐园&#xff08;^_^&#xff09;&#xff0c;村民们勤劳、勇敢…

电磁学讲义6:高斯定理计算电场

高斯定理是电场力平方反比定律和线性叠加原理的直接结果。也可以由高斯定理作为基本规律导出库仑定律。这说明高斯定理和库仑定律是不同形式的表示电荷和电场关系的同一规律。库仑定律可以使我们从电荷分布求出电场分布&#xff0c;高斯定理可以使我们从电场分布求出电荷分布。…

ant table表格整行点击事件并获取当前行的数据

实现效果:点击表格中某一行,或者点击表格中某一行的一个字段,获取当前行的 item 下标数据,并用 Link 标签传参,下一个页面接收的实现。 如果使用 router 跳转路由传参,需要导入 import router from umi/router; 如果用 Link 跳转路由传参,需要导入 import Link from u…

以太坊公链私链_如何使用以太坊构建汽车制造供应链系统

以太坊公链私链by Marcelo Russi Mergulho由Marcelo RussiMergulho 如何使用以太坊构建汽车制造供应链系统 (How to build a car manufacturing supply chain system using Ethereum) Here at Daitan we are always looking for new technologies that can help our clients s…

微信一次性订阅消息

微信一次性订阅消息官方文档&#xff1a;消息管理>发送一次性订阅消息 开发者可以通过一次性订阅消息授权让微信用户授权第三方移动应用&#xff08;接入说明&#xff09;或公众号&#xff0c;获得发送一次订阅消息给到授权微信用户的机会。授权微信用户可以不需要关注公众号…

react控制组件的显示或隐藏, 根据state判断元素显示隐藏 , setState不实时生效解决方法

代码实现功能&#xff1a;根据 state 中的值判断子组件显示或隐藏&#xff0c;因为 setState 不是及时生效的&#xff0c;所以不做显示隐藏判断会报错。 render() {// 客户经理循环组件function CommentSpan(props){const numbers props.managers;if(!numbers) return;const l…

关于R语言plyr包的安装问题

平时安装R包都是从Rstudio中进行的&#xff0c;今天在装plyr包的时候&#xff0c;Rstudio一直报错&#xff0c;示例如下&#xff1a; 是不是很无语啊&#xff0c;搞了半天不知所以然&#xff0c;然后突发奇想从Rgui中安装试下&#xff0c;没想到轻轻松松就成功了&#xff0c;示…

regexp 好汉字符串_如何在JavaScript中使用RegExp确认字符串的结尾

regexp 好汉字符串by Catherine Vassant (aka Codingk8)由凯瑟琳瓦森(Catherine Vassant)(又名Codingk8) 如何在JavaScript中使用RegExp确认字符串的结尾 (How to use a RegExp to confirm the ending of a String in JavaScript) Using the Regexp ?️ constructor使用Regex…

【转】浅谈分布式锁

前言 随着互联网技术的不断发展&#xff0c;数据量的不断增加&#xff0c;业务逻辑日趋复杂&#xff0c;在这种背景下&#xff0c;传统的集中式系统已经无法满足我们的业务需求&#xff0c;分布式系统被应用在更多的场景&#xff0c;而在分布式系统中访问共享资源就需要一种互斥…

php中的抽象类(abstract class)和接口(interface)

一、 抽象类abstract class 1 &#xff0e;抽象类是指在 class 前加了 abstract 关键字且存在抽象方法&#xff08;在类方法 function 关键字前加了 abstract 关键字&#xff09;的类。 2 &#xff0e;抽象类不能被直接实例化。抽象类中只定义&#xff08;或部分实现&#xff0…

React 父组件给子组件传值,子组件接收

父组件传值代码&#xff1a; render() {return (<div>{this.state.list?(<GeomLine list{this.state.list}/>):null}</div>);} 子组件接收代码&#xff1a; class GeomLine extends Component {// 在组件接收到一个新的 prop (更新后)时被调用。这个方法在…

unity 灯笼_如何创建将自己拼成文字的漂亮灯笼

unity 灯笼In this tutorial, we will go through how to create a group of festival lanterns that arrange themselves into the words you choose. An online demo can be found here.在本教程中&#xff0c;我们将介绍如何创建一组节日灯笼&#xff0c;这些灯笼将自己布置…

Android PackageManager packages.xml文件格式

packages.xml文件存放在/data/system目录下 该文件记录了系统中所有应用程序的包管理相关信息 PmS根据该文件进行包管理的各种操作 标签名称所包含的值举例last-platform-versioninternal"17" external"17"<permission-trees />暂时不使用<…

tplink wr886n v5.0 ttl 接线方法

我的倒是有ttl信息,但是全是乱码,换过RX和TX,也换过串口速率都没用,附上TTL接线图.2016-11-02今天晚上终于搞定了ttl了,步骤如下:1.先将串口波特率改为117500(推荐使用Putty).如果可以了就不用第二步了2.将usb转ttl转接板上的rx和tx的指示灯干掉,可以留下电源指示灯详细教程见s…

React子组件给父组件传值, 父组件引用子组件并给子组件传值

本博客代码是 React 父组件和子组件相互传值的 demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图;效果图如下: 父组件代码: 代码解析:父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件,并且接收子组件…

我如何使用深度学习通过Fast.ai对医学图像进行分类

by James Dietle詹姆斯迪特尔(James Dietle) Convolutional Neural Networks (CNNs) have rapidly advanced the last two years helping with medical image classification. How can we, even as hobbyists, take these recent advances and apply them to new datasets? W…