axios设置请求头失效的问题

前言:因为在使用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配置失效。

原文地址:https://www.cnblogs.com/puerile/p/11926211.html

时间: 2024-10-06 13:20:56

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

axios设置请求头内容

axios设置请求头中的Authorization 和 cookie 信息: GET请求 axios.get(urlString, { headers: { 'Authorization': 'Bearer ' + token, "Cookie" : 'sessionId=' + sessionId + '; recId=' + recId, ... }, params: { param1: string, param2: string }, ... } ) .then(res =&g

ajax中的setRequestHeader设置请求头

1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflate, sdch,并且我尝试修改这个请求头,发现 不 生 效: 2.XMLHttpRequest对象提供了一个设置请求头的方法:setRequestHeader,对应的jQuery可以再beforeSend回调里面设置请求头: $.ajax({ type: "GET", url: "

设置请求头信息的不同方式

原文:http://blog.csdn.net/magiclr/article/details/49643277 在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status,

设置请求头解决浏览器同源问题

思想: 添加过滤器 设置请求头 代码如下 package com.deppon.vas.common.framework.cors; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servl

利用volley进行http设置请求头、超时及请求参数设置(post)

这里以post请求说明,get请求相似设置请求头及超时. 1.自定义request,继承com.android.volley.Request 2.构造方法实现(basecallback,为自定义的监听,实现Response.Listener,ErrorListener接口)--post请求 public BaseRequest(String url,String params, BaseCallback<T> callback)      {   super(Method.POST, url,

JavaScript之ajax的作用、流程以及如何设置请求头

什么是ajax?它的作用是什么?它的流程好处又有那些?如何设置请求头呢????????(嘻嘻,不知道请往下看哦): 1)什么是ajax呢? ajax即"Asynchronous Javascript And XML"(异步的JavaScript和xml),是指一种创建交互式网页应用的网页开发技术. 2)ajax的作用又是什么呢? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通俗的来讲:它是一种

AFN Post方法 设置请求头(json)

设置请求头:[manager.requestSerializer setValue:@"application/json" forHTTPHeaderField:@"Content-Type"]; GET方法设置请求头的时候没什么问题:但是使用POST方法时设置无效,使用其他方法都没用,后来发现没有序列化 manager.requestSerializer = [AFJSONRequestSerializer serializer]; 注意: 和manager.re

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

消费者 由于消费者那里,@Payload是接受的消息体,使用了@Header注解,需要请求头,生产者这边就要设置,如下代码: 这是RabbitTemplate中的converAndSend(exchang,routingKey,消息体,消息头)方法. @Override public void convertAndSend(String exchange, String routingKey, final Object message, final MessagePostProcessor me

axios设置请求拦截和响应拦截

首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 如果请求话费了超过 `timeout` 的时间,请求将被中断 headers: {'X-Custom-Header': 'foobar'} // 自定义请求头 }); 其他属性参考:https://www.kancloud.cn/yunye/axios/234845 接下来我们来添加拦截器 //