前言:因为在使用vue-element-admin框架时遇到了设置请求头失效的问题,在后来发现是代理跨域问题,所以又简单理解了一下跨域。

出现的问题是我在axios拦截器上设置了请求头token,但是在发送请求时并未携带token,

经过原因排查, 发现我在请求路径时直接设置为服务器环境域名,改为localhost,并通过proxy代理后成功设置了请求头token。

首先,了解什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

我们常见的跨域场景:

URL                                      说明                    是否允许通信
http://www.demo.com/a.js
http://www.demo.com/b.js 同一域名,不同文件或路径 允许
http://www.demo.com/lab/c.js http://www.demo.com:8000/a.js
http://www.demo.com/b.js 同一域名,不同端口 不允许 http://www.demo.com/a.js
https://www.demo.com/b.js 同一域名,不同协议 不允许 http://www.demo.com/a.js
http://127.0.0.1/b.js 域名和域名对应相同ip 不允许 http://www.demo.com/a.js
http://x.demo.com/b.js 主域相同,子域不同 不允许
http://demo.com/c.js http://www.demo1.com/a.js
http://www.demo2.com/b.js 不同域名 不允许

为什么会产生跨域?

出于浏览器的同源策略限制。同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

前端解决跨域的几种方法

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

回到上面的问题, 之所以出现未携带请求头token的问题就是我在本地直接请求了https协议产生了跨域,导致axios配置失效。

axios设置请求头失效的问题的更多相关文章

  1. axios设置请求头内容

    axios设置请求头中的Authorization 和 cookie 信息: GET请求 axios.get(urlString, { headers: { 'Authorization': 'Bea ...

  2. 设置请求头解决浏览器同源问题,ajx跨域获取cookie问题

    思想: 添加过滤器 设置请求头 代码如下 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.F ...

  3. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  4. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  5. ajax里post 设置请求头的编码格式

    我们常用的ajax形式就是post和get.post需要设置请求头,那么问题来了: 首先,为什么get不需要设置编码格式? 其次:不设置post请求头编码格式可以吗? 还有:常用的请求头编码格式有哪些 ...

  6. 给RabbitMQ发送消息时,设置请求头Header。

    消费者的请求头 生产者设置请求头 由于消费者那里,@Payload是接受的消息体,使用了@Header注解,需要请求头,生产者这边就要设置请求头,然后rabbitTemplate再调用convertA ...

  7. jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头

    beforeSend方法的用户主要有下面几个: 第一:用于在发送ajax请求之前设置请求头 即作为前端,如果我们希望在发送数据之前设置请求头,就可以像下面这么做: beforeSend: functi ...

  8. PHP——curl设置请求头需要注意哪些

    前言 在设置这个请求头上踩了一些坑,此文记录下. 步骤 设置请求头 curl_setopt($ch, CURLOPT_HTTPHEADER, $header); 请求头写法 一定不要忘记:不然进行请求 ...

  9. vue+vue-resource设置请求头(带上token)

    前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...

随机推荐

  1. 《JavaScript高级程序设计》读书笔记(四)变量、作用域和内存问题

    内容---理解基本类型和引用类型的值---理解执行环境---理解垃圾收集 --JavaScript变量松散类型的本质--决定了它只是在特定时间用于保存特定值的一个名字而已--变量的值及其数据类型可以在 ...

  2. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  3. Django-ORM的F查询和Q查询

    当一般的查询语句已经无法满足我们的需求时,Django为我们提供了F和Q复杂查询语句.假设场景一:老板说对数据库中所有的商品,在原价格的基础上涨价10元,你该怎么做?场景二:我要查询一个名字叫xxx, ...

  4. 测量设备自动化-AK协议

    1.AK协议定义 AK协议是控制器和测量设备之间通信的方式,广泛应用于整车耐久转毂等测试中,如AVL VECON.人们通常都是用VECON界面设置试验曲线,但通过AK可以实现设备的自动化.如下图所示: ...

  5. 修改Linux的默认编码

    Windows的默认编码为GBK,Linux的默认编码为UTF-8.在Windows下编辑的中文,在Linux下显示为乱码.为了解决此问题,修改Linux的默认编码为GBK.方法如下: 方法1: vi ...

  6. Python磁力获取器命令行工具 torrent-cli

    作为一个搞代码的,找资源这种事肯定不能像普通人一样打开百度盲目查找,你需要写个爬虫工具来帮你完成这件事情啦! 兼容环境 Windows/Linux/MacOs 安装 pip 安装 $ pip inst ...

  7. 03.使用私有构造方法或枚类实现 Singleton 属性

    前言 <Effective Java>中文第三版,是一本关于Java基础的书,这本书不止一次有人推荐我看.其中包括我很喜欢的博客园博主五月的仓颉,他曾在自己的博文<给Java程序猿们 ...

  8. ios 物流时间轴,自动匹配电话号码,可点击拨打

    http://www.code4app.com/thread-27587-1-1.html 资讯时间轴(折叠/展开) http://www.code4app.com/thread-32358-1-1. ...

  9. Mysql 分组查询出现'this is incompatible with sql_mode=only_full_group_by'的解决办法

    由于Mysql自动开启了 only_full_group_by,所以若查询的字段不在group by里面,则分组报错. 解决办法其一:mysql配置,关闭only_full_group_by,这种办法 ...

  10. js数组去重解决方案

    js数组去重是前端面试中经常被问的题目,考察了面试者对js的掌握,解决问题的思路,以及是否具有专研精神.曾经一位前端界大神告诉我,解决问题的方式有很多种,解决问题时多问问自己还有没有其他的方法,探求最 ...