vue解决控制http的referer有无

最新推荐文章于 2022-05-10 09:31:37 发布
最新推荐文章于 2022-05-10 09:31:37 发布
阅读量5.9k 收藏 2
点赞数 2
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvxiucai/article/details/114107900
版权

场景：我需要清除ajax请求中的refer，通过headers{  referer: ''  }设置无效，因为w3c不允许这样做。

网上很多的案例都是关于axios伪造referer来控制，但是我设置的不生效

解决：

方法1：修改http协议中referer的metadata信息，html文档可以控制http请求的referer，比如是否发送referer、只发送hostname、完整的referer等

方法2：js的tricks，这种有待尝试，以后在做吧

 

方法1具体操作很简单，在ajax所在的页面任意位置加一个标签，

<meta name="referrer" content="never" />
lvxiucai
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue修改http请求头_vue-resouce设置请求头的三种方法
weixin_30693337的博客
12-29 6473
vue-resouce设置请求头的三种方法本文主要介绍了vue-resouce设置请求头的三种方法，分享给大家，具体如下：第一种：在Vue实例中设置var vm = new Vue({el:'#rrapp',data:{showList: true,title: null},http: {root: '/',headers: {token: token}}})第二种：全局设置请求头Vue.http...
Vue2.0用户权限控制解决方案
08-28
Vue2.0用户权限控制解决方案是基于Vue/Vue-Router/axios实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。本解决方案主要包括权限控制初始化、...
Vue中使用反向代理模拟http请求中host和referer，骗过Web服务器对请求的限制
songmumu博客
03-29 1万+
host:翻译的意思是主机,它在window.location中的作用是设置或返回当前URL的主机名和端口号referer:HTTP referer 是header的一部分，当浏览器向Web服务器发送请求的时候，一般会带上referer，告诉服务器我是从哪个页面过来的，服务器基于此可以获得一些信息进行处理，当然服务器可以检查请求来源页面的host和referer，并做相应的限制在Vue2.0中没有...
设置referrer
qq_45208029的博客
05-10 2299
1.全界面设置 所有界面挑战时携带地址origin，所有请求不携带地址never（修改后记得从新启动） <meta name="referrer" content="origin"> 2.单页面设置 vue的话可以设置一个vue-meta的插件（暂不介绍） 也可用在created从dom获取和修改（代码如下） created () { document.querySelector("meta[name='referrer']")["content"] = "neve
vue+axios请求时设置request header请求头（带上token）
sinat_28371057的博客
12-03 1万+
vue+axios请求时设置请求头（带上token） 1.在vue中，向后台发送请求，不管是get或post，url要带上userId，headers要带上token值（本地存储的token，window.localStorage[‘token’]） PS：登录成功后，后台会返回token和userId，存储在本地。但是跳转到其他页面时没有token，会报错undefined，所以每次请求都要带上token值。（每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路
vue获取当前url参数
chaosama的博客
08-28 3338
公司要从注册界面手动加上一个参数给我，我负责返回去给他们，不带的时候也能正常进入注册界面，类似于推荐人分享那样。不过嘛，咱只是个小前端，咱不知道，咱也不敢问，大佬让做什么就做什么。 url例子：http://172.16.1.140:8080/#/Invite?refererCode=123 this.refererCode = this.$route.query.refererCode ...
vue处理getpost的http请求
m0_67391121的博客
03-06 1008
一、使用Vue.http/this.$http 在发起请求的时候，为了减少作用域链的搜索，建议使用一个局部变量来接受this 1. GET请求 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallb
解决vue点击控制单个样式的问题
10-18
今天小编就为大家分享一篇解决vue点击控制单个样式的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue解决使用$http获取数据时报错的问题
01-19
在引用vue作为一个插件时，使用$http获取数据时报错 Failed to load http://****/ajaxGrainRain: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 只需...
请求头referer作用及去除
qq_49810363的博客
12-11 5388
注意：本人是菜鸟，仅供参考 一、请求头referer作用 当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，服务器因此可以获得一些信息用于处理 1、防盗链 比如服务器只允许网站访问自己的静态资源，那服务器每次都需要判断Referer的值是否是自己的域名，如果是就继续访问，不是就拦截 2、防止恶意请求 必须 Referer为我自己的网站才可以访问，否则禁止访问 二、在防盗链设置中，允许空Referer和不允许空Referer有什么区别？ 允许为空，那再浏览
referer-mod:Web Extension修改HTTP请求中的Referer标头
04-29
Referer-mod Referer Modifier是Firefox的Web扩展，用于修改HTTP请求中的Referer标头和匹配的Javascript document.referrer属性。 对于每个目标域，可以配置以下五个操作之一： 保留：请勿修改引荐来源网址 修剪：仅发送引荐来源的来源部分（方案，主机和端口） 目标：将目标URL的来源（方案，主机和端口）作为引荐来源发送 删除：完全不发送推荐人 替换：用配置值替换引荐来源 您可以为源自同一域的请求以及与域规则不匹配的任何其他请求配置默认操作。 如有必要，“替换”和“目标”操作将创建一个Referer标头，其他仅修改或删除现有标头。 可以将配置导出为JSON文件，也可以从JSON文件导入。 安装 用户应从安装插件。 如果您正在处理代码，则可以使用Firefox about:debugging页面将正在进行的工作作为临时加载
004_Vue音乐播放器（请求歌单列表伪造referer和host）
友人C君的博客
10-21 936
上一篇我们讲到，请求QQ音乐的推荐列表的轮播图数据，这些轮播图数据属于相对公开的数据，最多存在跨域问题，使用上篇说到的jsonp或者axios（在config的index.js函数中添加proxyTable进行请求代理）即可解决跨域问题。 这篇我们需要请求的时歌单列表，先看看请求回来的数据的格式 这个歌单列表数据的请求比较敏感，所以，QQ音乐对其API的请求做了限制，限制字段是refere...
vuecli配置proxy跨域
lalaladamowang的博客
09-18 285
vuecli 配置 proxy跨域配置 配置 在vuecli3根目录下新建一个vue.config.js module.exports = { devServer: { proxy:{ '/':{ target:'https://read.hyzj.lslive.club', changeOrigin:true, secure:false, // pathRewrite:{
vue2.0用axios来进行referer伪造
热门推荐
呐呐呐
05-08 2万+
当使用跨域jsonp接口时。referer属性是前台接口告诉服务器该接口的域名，而后台可以对应设置请求头referer从而对接口进行限制访问。 比如qq音乐的一个jsonp数据接口 https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg 其后台接口对referer和host的设置如下 referer: 'https://...
图片＜img＞、链接＜a＞等去除referer标记
lovewebeye的专栏
04-12 3340
1，img 标签 <img src='src' referrerpolicy='no-referrer/> referrerpolicy: no-referrer 访问来源信息不随着请求一起发送 no-referrer-when-downgrade （默认值） 在同等安全级别的情况下，会发送引用页面的地址，如HTTPS->HTTPS，但是如 HTTPS->HTTP，则不发送。 origin 发送文件的源作为引用地址。如 https://xxx.com/xxxx.html .
vue跨域调用qq音乐接口报"invalid referer"的解决办法
weixin_42353499的博客
04-02 2602
在进行后端跨域调用qq音乐获取歌单列表时发现报“invalid referer”错误。 于是在vue.config.js添加下面配置信息即可（注意referer中的地址后面要加上/ 否则仍会报上述错误，这个是为什么我也不清楚。后面留意一下） module.exports = { publicPath : '', devServer:{ proxy:{ ...
怎么在请求的过程中不发送referrer请求
init_yanxiao的博客
11-18 1059
在HTML页面头中通过meta属性全局配置： <meta name='referrer' content='no-referrer'><> 就可以了，功能在请求中不发送给referrer，使服务器不进行同源策略·
VUE3 Referer为”no-referrer“问题
weixin_42777366的博客
10-25 2896
VUE3 Referer为”no-referrer“问题问题描述解决 问题描述 为了设置七牛云的防盗链Referer，需要设置vue项目的referer，但是使用axios设置header等等都是不起作用的。 解决 在public的模板文件（index.html）中<head>标签下，添加一行<meta name="referrer" content="origin">即可生效，当然content的内容可以选择，content内容参考链接：https://www.jianshu.c
Vue使用proxy提示 “Refused to set unsafe header “Referer“”
前端小白-Mr鹏帅
03-05 1万+
在调用另一个源节点接口的时候，报错提示“Refused to set unsafe header "Referer" 报错信息 经过查询发现是因为浏览器拒绝人为设置伪装的referer 正巧不巧，在用vue的proxy来进行跨域处理，由此记录一下用法。 这是在调用axios的方法 method:'post', url:"/api/v1/home/page", headers:{ 'Content-Type':'application/x-www-form-ur
nginx部署vue解决跨域
最新发布
11-08
Nginx可以通过反向代理来解决Vue项目的跨域问题。具体步骤如下： 1. 在Nginx配置文件中添加一个location，指向Vue项目的地址。 2. 在该location中添加proxy_pass指令，将请求转发到Vue项目的地址。 3. 在该location中添加proxy_set_header指令，设置请求头信息，包括Host、Referer、User-Agent等。 4. 在Vue项目中，将axios的baseURL设置为Nginx的地址。 下面是一个示例Nginx配置文件： ``` server { listen 80; server_name example.com; location / { root /var/www/vue-project/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header Referer $http_referer; proxy_set_header User-Agent $http_user_agent; } } ``` 在上面的配置文件中，/api是Nginx的location，http://localhost:3000是Vue项目的地址。在Vue项目中，可以将axios的baseURL设置为/api，这样就可以通过Nginx来解决跨域问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值