vue拦截器设置请求头失败，laravel设置前端请求头跨域

最新推荐文章于 2024-10-25 15:09:51 发布
原创 最新推荐文章于 2024-10-25 15:09:51 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#laravel #请求头 #跨域 #vue

前端同事在vue的request里面的拦截器中设置请求头，发现'Authorization'可以正常添加到请求头，可以正常访问，但是添加其他的如'browserVersion'参数就不行，

会出现Request header field browserversion is not allowed by Access-Control-Allow-Headers in preflight response错误。

随后怀疑是nginx配置有问题，不过看了下nginx.conf中没并没有做相关跨域的配置项。后来就在laravel项目中找，全局搜索Access-Control-Allow-Headers字样，还真找到一个中间件文件，如下，

只要在允许头后面增加相应的参数，然后前端就可以设置其他的请求头了

Vue axios中请求拦截器 中配置Authorization报错
News777的博客
05-22 1312
错误代码 request.interceptors.request.use( (config) => { if (config.url.indexOf('/sys') != -1) { // 在发送请求之前做些什么 config.headers[Authorization] = localStorage.getItem('token'); return config; } return config; }, function (error) { // 对请求错
vue-resouce设置请求头的三种方法
08-29
Vue Resource 设置请求头的三种方法 在 Vue 项目中，设置请求头是非常重要的，因为它可以携带一些必要的...在 Vue 项目中，我们可以使用三种方法来设置请求头：在 Vue 实例中设置、全局设置请求头和在拦截器中设置。
Vue中axios拦截器post方式加不上请求头
Raoxiaohei的博客
12-18 1647
今天写项目封装axios中发现一个问题，开始给get自定义加请求头没问题 config.headers = {‘language’:‘Chinese’};，访问的通数据也及时返回了 后面写post请求需要加一个 config.headers = {‘Content-Type’:‘application/x-www-form-urlencoded’};就发现服务器500，报错了，去控制台查看的时候发...
解决：vue-axios 请求拦截器 Get 请求之添加请求头 Content-Type 无效
Miss_Y0的博客
04-24 4445
npm下axios的源码中，当未设置requestData的时候会删掉Content-Type的设置。没有参数时，设置参数不为undefined（即：不为false），request headers中没有出现。在axios封装请求方法中设置了请求头。
利用SpringMVC过滤器解决vue跨域请求的问题
11-29
之前写过通过注释的方法解决跨域请求的方法，需要每次都在controll类使用注解，这次通过springmvc的拦截器解决： 继承SpringMVC的类HandlerInterceptor重写preHandle方法，这个方法会在到达 controll之前调用，如下 ...
vue+axios全局添加请求头和参数操作
11-20
在进行POST请求时，为了确保数据以JSON格式发送，需要设置请求头`Content-Type: 'application/json'`。可以通过配置axios的`transformRequest`方法来实现： ```javascript axios.defaults.transformRequest = [data...
精选资源
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单...
接口中修改request headers无效
weixin_41287126的博客
06-02 2476
后台要求请求参数需要添加到 URL 上，所以接口的请求参数全部放在 params 里，这里修改 headers 无效。 一般 get 请求把请求参数放到 params 里，get 请求把需要传的参数拼接到 url 上，post 请求参数一般放在 data 中，不拼接到 url 上。 如果需要改变 headers ，一种是将 post 请求参数放在 data 中，如下 如果 post 仍将参数放在 params 里，则需要在 http request 拦截器里将 params进行序列化，JSON.st
VUE中使用axios在IE中自定义Header请求头无效问题
狼之鸿的博客
04-24 3126
环境 "axios": "0.18.0", "element-ui": "2.4.6", "es6-promise": "^4.2.6", "js-cookie": "2.2.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", "vue": "^2.5.2", "vue-count-...
Vue3+ts封装Axios时添加请求头报错
m0_73104634的博客
01-05 735
Vue3+ts封装Axios时添加请求头报错 1.Axios版本为最新版本 卸载Axios下载低版本可以完全解决问题。使用set方法发现报错为：无法调用可能为null或未定义的对象。2.找到Axios的.d.ts文件找到一个set方法。添加一个检查即可解决报错问题。
网络请求自定义header导致跨域问题
我的专栏
10-25 795
2.创建一个中间件配置文件，只要配置了中间件，Thinkphp5.1以上的版本中Controller里不用显示调用，系统默认会使用它。MyCrossDomain.php文件 在这里我添加了自己需要的header： “Code"我后端用的ThinkPhp，网上搜索了各种解决跨域的配置，折腾了好久。后来在功能开发着，需要添加一个自定义的header，发现又出现跨域报错。至此困扰我两天的添加自定义header引起的跨域问题得以解决。我记得我的项目之前已经解决了跨域问题。于是又开始一通摸索折腾。
vue设置请求头报 Request header field xfilesize is not allowed by Access-Control-Allow-Headers
看到我在玩请叫我去敲代码的博客
06-25 6171
import axios from 'axios' import Qs from 'qs' const baseURL = 'http://test.dc.cszysoft.com:8089' const Evaluation = 'http://test.dc.cszysoft.com:19417' axios.defaults.baseURL = baseURL axios.defaul...
Http自定义Header导致的跨域问题
08-04 607
Http自定义Header导致的跨域问题
踩坑-IE浏览器中vue用axios跨域请求，列表中不存在请求标头
影落离风
04-23 2678
最近发现公司做的一个项目，一些供应商客户在浏览器上打不开，询问才知道用的是“天杀的IE浏览器”，这都2020年了居然还有人在用IE[默默的在心里暗骂]。我们建议客户安装谷歌，但是客户不接受我们的建议。 好吧，那只能找找问题在哪里了。 IE、360极速浏览器的兼容模式出现的问题 前端使用的是vue，http请求使用axios 后台的跨域处理 在MDN web docs上查到了一些蛛丝...
[PHP] 再续　Laravel 5.5 接口 跨域问题 【终极暴力解决办法】
weixin_30263277的博客
07-28 354
上文中提到 Laravel5.5 使用 laravel-cors 实现 Laravel 的跨域配置 用插件来跨域 此方法能解决一部分api 请求问题 但我碰到的是 接口 请求size 超过10k，导致 跨域中间件 无法执行到 找了下代码，没有找到哪个地方限制 大小的 配置 最终解决办法，暴力解决： 直接在api接口的json方法里，输出几个heade...
springboot+vue3项目axios传递参数报错431 Request Header Fields Too Large
Meetinglove的博客
06-26 1263
这个问题困扰了我一段时间，在网上找了各种方法，都是没有解决，最后自己终于摸索解决了，就是运气很好，一次不错的体验！！！
springboot+vue解决跨域读取不出header的内容
热门推荐
u012534163的博客
03-16 1万+
最近在做一个项目是springboot作为后端服务，使用vue作为前端开发，本人主负责springboot后端。 然后在介入后端api过程中，前端开发人员告诉我获取 respose headers 时候获取到的只有的 而实际后端已经全部提供了 经过讨论发现是服务器上要设置 Access-Control-Expose-Headers。 我们项目springboot关于CORS配置如...
vue3 axios怎么设置请求头
最新发布
03-22
### Vue3 中 Axios 设置请求头的方法 在 Vue3 项目中使用 Axios 设置请求头可以通过多种方式实现，具体取决于项目的实际需求以及后端接口的要求。以下是几种常见的设置请求头的方式： #### 方法一：全局默认配置 通过 `Axios` 的全局默认配置可以为所有的请求统一设置请求头。 ```javascript import axios from 'axios'; // 全局设置请求头 axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; axios.defaults.headers.post['Content-Type'] = 'application/json'; ``` 这种方式适用于所有请求都需要相同的头部信息的情况[^1]。如果某些特定的请求不需要这些头部信息，则可以在单独的请求中覆盖它们。 --- #### 方法二：实例级别的配置 创建一个新的 Axios 实例并为其指定自定义的请求头。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json', // 默认 JSON 格式的请求体 'Authorization': `Bearer ${localStorage.getItem('token')}` } }); export default instance; ``` 这种方法适合于需要针对不同模块或功能区分开来的场景[^4]。例如，在登录模块和数据查询模块之间可能有不同的认证机制或者不同的基础 URL。 --- #### 方法三：单次请求中的动态配置 对于一些特殊的请求，可以直接在每次调用时传递具体的头部信息。 ```javascript this.$axios({ method: 'post', url: '/login', data: { username, password }, headers: { 'Content-Type': 'application/x-www-form-urlencoded', // 或者其他格式 'Custom-Header': 'custom-value' } }).then(response => { console.log(response.data); }); ``` 当某个 API 接口有特殊的需求（比如上传文件时需要 multipart/form-data 类型），则推荐此方法来灵活调整请求头[^3]。 --- #### 方法四：拦截器修改请求头 利用 Axios 提供的拦截器功能，可以在发送请求之前自动添加所需的头部字段。 ```javascript axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); ``` 这种做法特别有用，尤其是在用户身份验证过程中需要用到令牌的情况下。它能够减少重复代码量，并保持逻辑的一致性和可维护性。 --- #### 注意事项 1. 如果遇到跨域问题导致自定义 Header 被拒绝访问，请确认服务器端已经正确设置了 CORS 头部响应项，如 `Access-Control-Allow-Headers` 包含了客户端所使用的 Headers 名称列表。 2. 对于敏感信息（如 Token），建议存储在 HTTP-only Cookies 中而不是 LocalStorage，从而提高安全性。 3. 当 Content-Type 设定为 application/json 并且传输复杂对象作为 payload 数据时，通常还需要借助 JavaScript 原生函数 `JSON.stringify()` 将其序列化成字符串形式再提交给服务端解析处理[^2]。 --- ### 总结 以上介绍了四种主要的技术手段用于解决如何在 Vue3 应用程序里边适配 Axios 客户库完成对远程 RESTful Web Service 进行交互前预设必要的 Meta Data 属性值这一类典型开发任务的实际应用场景下的最佳实践方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值