请求相关问题

1、Axios在手机网页上进行跨域请求失败,HTTP状态码返回0

,解决这个问题就让后端改了一行代码
access-control-allow-headers: *
上面这个headers不能设置为 *,要设置具体字段,如下
access-control-allow-headers: Content-Type

2、请求图片返回403

http请求体的header中有一个referrer字段,用来表示发起http请求的源地址信息,
这个referrer信息是可以省略但是不可修改的,就是说你只能设置是否带上这个referrer信息,不能定制referrer里面的值。

服务器端在拿到这个referrer值后就可以进行相关的处理,比如图片资源,可以通过referrer值判断请求是否来自本站,
若不是则返回403或者重定向返回其他信息,从而实现图片的防盗链。上面出现403就是因为,请求的是别人服务器上的资源,
但把自己的referrer信息带过去了,被对方服务器拦截返回了403。

在前端可以通过meta来设置referrer policy(来源策略),具体可以设置哪些值以及对应的结果参考这里。所以针对上面的403情况的解决方法,
就是把referrer设置成no-referrer,这样发送请求不会带上referrer信息,对方服务器也就无法拦截了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,需要在 Vue.js 中引入 Element UI 和 Axios: ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios'; ``` 然后,在页面中使用 Element UI 的表单组件和富文本编辑器组件: ```html <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="手机号码" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="所在城市" prop="city"> <el-select v-model="form.city" placeholder="请选择城市"> <el-option label="北京" value="beijing"></el-option> <el-option label="上海" value="shanghai"></el-option> <el-option label="广州" value="guangzhou"></el-option> <el-option label="深圳" value="shenzhen"></el-option> </el-select> </el-form-item> <el-form-item label="广告语" prop="slogan"> <el-input type="textarea" v-model="form.slogan"></el-input> <div class="slogan-count">还可以输入 {{ sloganCount }} 个字</div> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 其中,`rules` 是 Vue.js 的表单验证规则: ```javascript data() { return { form: { name: '', phone: '', gender: '', age: '', city: '', slogan: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ], city: [ { required: true, message: '请选择所在城市', trigger: 'change' } ], slogan: [ { required: true, message: '请输入广告语', trigger: 'blur' }, { min: 5, message: '广告语不能少于 5 个字', trigger: 'blur' }, { max: 30, message: '广告语不能超过 30 个字', trigger: 'blur' } ] } } } ``` 使用 Vue.js 的计算属性 `sloganCount` 来实时计算广告语的字数: ```javascript computed: { sloganCount() { return this.form.slogan.length > 30 ? 0 : 30 - this.form.slogan.length; } } ``` 最后,在提交表单时使用 Axios 发送 POST 请求: ```javascript methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { axios.post('/api/submit', this.form).then(res => { if (res.data.code === 0) { this.$message.success('提交成功'); } else { this.$message.error('提交失败,' + res.data.message); } }).catch(err => { this.$message.error('提交失败,' + err.message); }); } else { return false; } }); } } ``` 其中,后端 API 的地址为 `/api/submit`。提交成功后,显示提交成功提示信息,并提供分享按钮。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值