vue 前端设置允许跨域_web 前端的一些小问题

关于vue使用axios post发送json数据跨域请求403的解决方法:

1. 问题

vue开发的时候,使用axios跨域发送请求,同时post发送的数据格式是json格式,发送出去的时候发现控制台报错403,返回的信息提示是跨域的问题,但是后台已经对跨域进行了处理,因此出现这个问题并不是后台的问题,需要在前端解决,而且通过查看后台的日志发现后台根本没有接收到请求。

48c93aec2c97e3dd7fd4ef689b4b79ef.png

2. 查找资料

网上找了很多资料,比如:

说法一、 通过设置post请求的header中的Content-Type值为application/x-www-form-urlencoded,然后重新发送请求,发现控制台还是返回403跨域信息的错误;

说法二、 在设置post请求的header中的Content-Type值为application/x-www-form-urlencoded以后,使用transformRequest方法对发送的数据进行处理,这个时候奇迹发生了,请求发送出去了,并且成功获取了后台的响应,

05276bc7ae8b9b6cc71bd479c5598bb8.png

但是,发现这种方法存在一个问题,就是发送出去的数据不是JSON格式而是字符串格式,真是令人头大,然后不管我怎么折腾都没有把这个方法解决。

3. 解决方法

就在这个问题陷入僵局的时候,我突然想到之前使用jquery的时候也曾经遇到过相关的问题,但是通过设置Content-Type的值为"text/plain"解决的问题,于是乎我将post请求的headers中的Content-Type的值从application/x-www-form-urlencoded修改为text/plain,然后重新发送请求,这个时候,奇迹再次发生了,问题解决了!

f153b651affa6566efda2ed96a74b7a4.png

4. 总结解决方法

设置全局post请求的Content-Type值为"text/plain",然后在发送请求的时候需要对JSON数据进行stringify转化一下即可完美解决问题!

9f1919cffabc747afceb39d22c748253.png

7c740a9e01b50527c08f8ef9029485f0.png
  • 当然可以不用设置全局,只需要单独配置某个请求也是可以的,防止后面有其他类型的请求,造成污染。

:浏览器跨域并不支持application/json的Content-Type,即使后台设置了允许的跨域头部参数,依然会报错。

本文所述的问题是基于后台已经做了跨域处理的情况下,如果不确定后台是否已经作跨域处理,建议先用原生的ajax或者jquery等进行问题排查,不要因为后台的疏忽导致前端浪费时间去处理!!!。此次更新采用更规范更容易维护的方法来解决问题。

将请求进行分离,统一处理所有的request和response,request.js代码如下:

import axios from 'axios'
import { Notification } from 'element-ui'// 创建axios实例
const service = axios.create({baseURL: process.env.BASE_API,timeout: 50000 // 请求超时时间
})// request拦截器
service.interceptors.request.use(config => {config.headers['Content-Type'] = 'text/plain' // 关键所在return config},error => {console.log(error) // for debugPromise.reject(error)}
)// response 拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.resultCode !== '000') { // 后台返回码,根据自己的业务进行修改Notification.error({title: '错误',message: res.resultDesc, // 错误描述信息duration: 0})return Promise.reject('error')} else {return response.data}},error => {console.log('err' + error) // for debugNotification.error({title: '错误',message: error,duration: 0})return Promise.reject(error)}
)export default service

引用,test.js:

import request from '@/utils/request'export function sendRequest(params) {return request({url: '/services/test',method: 'post',data: JSON.stringify(params),// header: { // 已经在request.js里面进行全局设置,也可以在请求里面局部设置其他headers//    'Content-Type': 'text/plain'// }})
}

发送请求,test.vue:

import { sendRequest } from '@/api/request'let postData = {'serviceType': 'logQuery','occurTime': new Date(),'key': scope.row.key,'type': scope.row.type}sendRequest(postData).then(response => {console.log(response)})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/306321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 Windows 10 上安装 WSL 2

翻译自 Joey Sneddon 2020年10月30日的文章《How to Install WSL 2 on Windows 10》 [1]如果您想在最新的 Windows 版本中尝试经过改进的 Windows 子系统 Linux 2 (即 WSL 2) [2],要怎么做呢?我们在本文中介绍了安装它所需要做的所有事情。WSL 2 是微软早…

机器学习之超参数调优——超参数调优的方法

超参数调优的方法概述网格搜索随机搜索贝叶斯优化算法概述 对于很多算法工程师来说, 超参数调优是件非常头疼的事。除了根据经验设定所谓的“合 理值”之外, 一般很难找到合理的方法去寻找超参数的最优取值。 而与此同时,超参数对于模型效果…

lnmp无法远程连接mysql_MySQL(一):设置root 可以远程连接MySQL

在mysql在远程主机或虚拟机上时,远程连接mysql数据库一般都使用GUI工具,比如Mac下的Sequel Pro;win和linux下的Sqlyog; 还有大名鼎鼎的Navicat。有人也许会说命令行多好,对着黑黑的屏幕噼里啪啦的一顿敲,屏…

机器学习之模型——保存与加载

机器学习之模型——保存与加载 知识点fit()transform()fit_transform()目的API流程获取数据划分数据集标准化预估器保存模型加载模型得出模型模型评估整体代码知识点 fit() Method calculates the parameters μ and σ and saves them as internal objects. 解释:简单来说,…

GraphQL:打造自己的Directive库

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进&#xff0c…

云付认证已通过可以支付吗_海科融通丨刷新支付日常问题【附交易操作步奏】...

01常见问题汇总QPIN秘钥检验出错A:认证时不要频繁点击,点完后等一等系统反应,可联系客服处理。Q报错99,该小商户已入网A:提供商户编号给服务经理处理。Q终端屏幕无法签字A:待机界面,输入#0#&…

机器学习案例——生态系统蒸散速率预测

生态系统蒸散速率预测 问题背景概述数据集、代码、报告下载实验步骤分析一、数据预处理1、 对生态观测数据表和植被数据表进行数据预处理2、将不同站点的多个表进行纵向合并3、进行质量控制及去除异常值二、筛选特征1、画相关性热力图(使用热力图进行相关性分析)2、进行特征选择…

邀请函|WorkShop报名通道开启,来就送礼!

作为互联网行业的年度盛会今年除延续以往的开幕与论坛技术分享外还增设了Work Shop 体验课程!参加此次工作坊不仅能近距离和大佬进行互动体验项目开发的快感还能领取大会纪念卫衣、书籍等惊喜好礼是不是很期待?(数量有限先到场先得&#xff0…

对象数组参数_【JavaScript 教程】标准库—Array 对象

作者 | 阮一峰1、构造函数Array是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组。var arr new Array(2);arr.length // 2arr // [ empty x 2 ]上面代码中,Array构造函数的参数2,表示生成一个两个成员的数组…

机器学习之无监督学习——聚类

机器学习之无监督学习——聚类无监督学习一、基于划分的聚类方法1、基于划分的方法 简介A、概念B、分组C、分组与样本 对应关系D、硬聚类 与 软聚类二、基于层次的聚类方法1、基于层次的聚类方法 概念 :2、基于层次的聚类方法 :A、聚合层次聚类 ( 叶子节点到根节点 )聚合层次聚…

2020 . NET大会日程公布!行程亮点全曝光

|倒计时5天文末有福利答应我看到最后|2020年12月19日由.NET众多社区联合组织主办的2020年中国.NET开发者大会将于苏州盛大开幕时间:2020/12/19-12/20主题:开源、共享、创新地点:苏州人工智能产业园▽本次大会以“开源、共享、创新”为主题&am…

橡皮擦_日本推出改邪归正橡皮擦,看得我头顶一凉

▲▲▲点击查看▲▲▲日本,可以说是文具控的天堂。各种不按套路出牌,又十分合理有趣的文具,真是太多太多。就比如这块「改邪归正橡皮擦」:这么看,你可能看不出到底怎么个改邪归正法,但其实它的创作灵感来自…

机器学习之琐碎知识(代码运行问题)

机器学习之琐碎知识1、python代码中忽略警告2、python在画图时显示中文1、python代码中忽略警告 解决方案: import warnings warnings.filterwarnings("ignore")2、python在画图时显示中文 解决方案: # 支持中文 plt.rcParams[font.sans-s…

三菱四节传送带控制梯形图_一文讲透FX5U PLC程序控制指令及步进梯形图编程

三菱PLC在80年代进入中国市场,已有30多年历史。由于三菱PLC编程易学,功能强大,深受中国用户喜爱。随着时间推移,市场上已经淘汰掉二代产品,关系图如下:说明90年代老型号2000年代老型号低端小型机FX0SFX1S中…

在 ASP.NET Core 中使用多种方式给 Action 传参

ASP.NET Core 是一个跨平台,开源的,轻量级,高性能 并且 高度模块化的web框架。在 ASP.NET Core MVC 中有很多种方式可以给 Action 方法传递参数,比如说:url方式,querystring方式,request header…

机器学习之tensorflow出现的一些问题

机器学习之tensorflow出现的一些问题 1、查看tensorflow版本2、Jupyter Notebook 工作环境配置3、anaconda查看已有环境4、anaconda进入已有的虚拟环境5、查看该环境下的TensorFlow的版本6、查看查看anaconda虚拟环境中的python 版本1、查看tensorflow版本 import tensorflow …

gitlab创建分支上传文件_Gitlab管理和使用基本教程

一、注册并设置Gitlab个人信息(一)注册Gitlab登录Gitlab站点,注册账户,设置基本个人信息。按提示操作即可。(二)配置ssh连接信息1.创建SSH密钥通过下面的命令生成密钥,请将命令中的YOUR_EMAILYOUREMAIL.COM替换为你注册Gitlab时用的Email地址…

WinUI 3 Preview 3 发布了,再一次试试它的性能

1. WinUI 3在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI。最终 XAML 的新功能不再和 Windows SDK 绑定,所有新的 XAML 功能都将作为 WinUI 的一部分发布。作为 OS 的…

机器学习的一般流程

机器学习的一般流程 一、数据采集与标注二、数据探索1、认识数据2、基本统计数据描述三、数据预处理1、数据清洗(1)、缺失值处理(2)、异常值处理(3)、重复值的处理2、数据集成3、数据变换(1)、简单函数变换(2)、规范化(归一化、标准化)(3)、连续属性离散化(4)、属性构造(5)、特…

m苹果放n篮子_egg appple千万别翻译为“鸡蛋苹果”,老外听到会懵圈的

egg很熟悉,apple也很熟悉,可是egg apple就让人一脸懵了,鸡蛋苹果是啥玩意?难道中国人有番茄鸡蛋,而歪果仁喜欢鸡蛋炒苹果?1:egg apple 是什么意思?其实英国人眼中的茄子是 egg apple…