vue为什么get请求参数在开发环境没有了,本地就没有问题, if (config.method === 'get') { if(config.params){ console.log(config.params,'config.params'); const entries = Object.entries(config.params); // 过滤掉属性值为空字符串的属性 const filteredEntries = entries.filter(([key, value]) => value !== null&&value !== undefined); // 将过滤后的数组转换回对象 const params = Object.fromEntries(filteredEntries); // const params =lodash.pickBy(config.params,item=>item); const encodedParams = new URLSearchParams(params); // 将编码后的查询参数赋值给原先的params config.params = encodedParams; } config.paramsSerializer = function (params) { return qs.stringify(params, { arrayFormat: 'repeat'}) }代码是这样的
时间: 2024-02-10 18:29:36 浏览: 20
在开发环境中,get请求参数可能会被过滤掉或者被修改的原因可能有以下几种情况:
1. 请求拦截器的影响:在开发环境中,可能会存在自定义的请求拦截器,该拦截器可能会对请求参数进行处理或者过滤。你可以查看一下是否有相关的拦截器代码。
2. 开发环境配置:开发环境和本地环境可能存在不同的配置文件,这些配置文件可能会影响请求参数的处理方式。你可以检查一下开发环境的配置文件,看是否有对请求参数进行处理的相关配置。
3. 后台服务的差异:开发环境和本地环境可能连接的是不同的后台服务,这些服务可能对请求参数有不同的处理逻辑。你可以与后台开发人员沟通,了解一下后台服务对请求参数的处理方式。
需要注意的是,以上只是一些可能的原因,具体原因还需要根据你的具体环境和代码进行分析。
相关问题
在 vue.config.js 文件中的 devServer 的 before 钩子中将post请求转成get请求
在 `vue.config.js` 文件中的 `devServer` 对象中的 `before` 钩子中可以通过以下代码将 `post` 请求转成 `get` 请求:
```javascript
module.exports = {
devServer: {
before: function(app, server) {
app.use(function(req, res, next) {
if (req.method === 'POST') {
req.method = 'GET';
}
next();
});
}
}
}
```
这里通过 `app.use` 注册了一个中间件,在中间件中判断请求方法是否为 `POST`,如果是则将请求方法修改为 `GET`,然后调用 `next()` 进行下一步处理。这样就可以将 `POST` 请求转成 `GET` 请求。需要注意的是,这种方式只是修改了请求方法,如果请求体中含有数据,需要根据具体情况进行处理。
vue封装加密图片get请求
可以封装一个自定义的axios实例来进行加密图片的get请求。具体实现步骤如下:
1.在项目中安装crypto-js模块,用于进行图片加密。
```
npm install crypto-js --save
```
2.在封装的axios实例中添加一个请求拦截器,用于在请求发送前对图片进行加密。
```
import axios from 'axios'
import CryptoJS from 'crypto-js'
const instance = axios.create({
baseURL: 'http://example.com/api',
timeout: 5000
})
instance.interceptors.request.use(config => {
if (config.method === 'get' && config.params && config.params.image) {
const encryptedImage = CryptoJS.AES.encrypt(config.params.image, 'secret_key').toString()
config.params.image = encryptedImage
}
return config
}, error => {
return Promise.reject(error)
})
export default instance
```
3.在组件中使用封装的axios实例进行加密图片的get请求。
```
import axios from '@/utils/axios'
export default {
methods: {
getImage () {
const imageUrl = 'http://example.com/image.png'
axios.get('/image', {
params: {
image: imageUrl
}
}).then(response => {
// 处理加密后的图片数据
}).catch(error => {
console.log(error)
})
}
}
}
```
注意:在服务器端需要进行图片解密的操作,使用相应的加密算法和密钥进行解密。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
0">
{{bk.bookName}} ¥{{bk.bookPrice}} //列表页——分页 layui.use(['laypage'], function () { var laypage = layui.laypage; laypage.render({ elem: 'houseList' , count: 25 , limit: 5 , theme: '#daba91' , layout: ['page', 'next'] }); }); Vue.config.productionTip = false //阻止vue在启动时生成生产提示 new Vue({ el: "#app", data() { return { bookAll: [] } }, mounted() { var _this = this; axios({ method: 'get', url: 'http://localhost:8080/BookShopSystem_war/getBookAll' }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == 0) { _this.bookAll = data; } console.log(data) }) } })已省略部分代码,数据都可遍历出来,如何实现分页功能
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)