前端解决跨域 3 种方法 -对接读卡器时出现跨域问题

2023-11-08 18:01

本文主要是介绍前端解决跨域 3 种方法 -对接读卡器时出现跨域问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 背景概述
  • 实现中遇到的问题
  • 解决
    • 方法1 - 反向代理
    • 方法2 - JSONP
      • 实现1
      • 实现2 借助jQuery(我用的)
    • 方法3 - 原生请求
    • 方法4 - 接口请求时请求头解决跨域

背景概述

开发过程中对接读卡器硬件时,和C++工程师对接,C++工程师写了一个程序,安装到自己电脑上后会提供一个接口 http://localhost:5001/api/XXXXX 用来获取读卡器读取到的数据(该数据是经过C++程序处理过的)

具体过程:

  1. 安装C++程序到本机
  2. 将磁卡放在读卡器上(读卡器插在自己电脑上)
  3. 调用接口 http://localhost:5001/api/XXXXX

实现中遇到的问题

  • 我们自己本地运行项目时,使用【方法1】反向代理可以;
  • 项目部署到线上时,我们前端写的反向代理是不会打包进包里的,需要后端 nginx 配置代理,但是后端 nginx 代理如果代理地址写 http://localhost:5001 只能代理到服务器,而不能代理到我们本机(C++的程序是在我们自己电脑安装的,服务器访问不到)
  • 而我们线上如果直接请求地址 http://localhost:5001/api/XXXXX ,会有跨域问题
  • 【所以】我们需要解决一下跨域:使用【方法2】【方法3】

api.js 文件中封装接口

export function XXX() {return request({url: '/RFID/api/XXX'})
}

调用接口 出现跨域问题

GetCardNum() {GetCardNum().then((res) => {this.$set(this.formData, 'rfid', res.cardnum || '')})
}

解决

方法1 - 反向代理

vue.config.js 文件中 将以 /RFID 开头的地址代理到本地程序地址即可

module.exports = {// ...// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: 8080,https: false,hotOnly: false,open: true, // 自动打开浏览器proxy: {// ...'^/RFID': {target: 'http://localhost:5001', // 【主要代码】pathRewrite: { '^/RFID': '' }},'/': {target: 'http://192.168.0.42:9000'}}},// 第三方插件配置pluginOptions: {// ...}
}

方法2 - JSONP

需要 C++ 工程师配合一下,需要调用一下 url 的 查询参数 callback

实现1

// 提供jsonp服务的url地址;
var url = 'http://localhost:5001/api/GetCardNum'
// 创建script标签,设置其属性;
var script = document.createElement('script')
script.setAttribute('src', url)
document.getElementsByTagName('head')[0].appendChild(script)
// 得到查询结果后的回调函数;
var callback = (data) => {var json = JSON.stringify(data)console.log('json----', json)
}
callback(132465)

实现2 借助jQuery(我用的)

借助jQuery

import $ from 'jquery'const that = this
$(function () {// 发起JSONP的请求$.ajax({url: 'http://localhost:5001/api/XXX',// 代表我们要发起JSONP的数据请求dataType: 'jsonp',jsonp: 'callback',jsonpCallback: 'fileCabinetHandler',success(res) {// res 数据即为接口返回的读取读卡器数据}})
})

方法3 - 原生请求

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && [200, '200'].includes(xhr.status)) {console.log('xhr.responseText----', xhr.responseText)}
}
xhr.open('get', 'http://localhost:5001/api/GetCardNum', true)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
xhr.send(null)jsonpRequest('http://localhost:5001/api/GetCardNum', null).then((response) => {console.log(response) // 处理返回的数据}).catch((error) => {console.error(error) // 处理错误信息})
var xhr = new XMLHttpRequest()
// xhr.open('get', 'http://192.168.10.106:5001/api/GetCardNum', true)
xhr.open('get', 'http://127.0.0.1:5001/api/GetCardNum2', true)
xhr.setRequestHeader('Content-Type', 'application/json') // 设置请求头中的 Content-Type
xhr.setRequestHeader('Access-Control-Allow-Origin', '*') // 添加允许跨域的请求头
xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {var data = JSON.parse(xhr.responseText)console.log('data----', data)// 处理响应数据} else {// 处理错误}}
}
xhr.send(JSON.stringify({// 请求体数据,如果不需要发送请求体,则可以省略该部分// 根据你的接口定义,替换成对应的请求体数据})
)

方法4 - 接口请求时请求头解决跨域

// 接口请求头添加 Access-Control-Allow-Origin 为 * 解决跨域
if (config.url === '/RFID/api/GetCardNum') {
if (config.url === 'http://localhost:5001/api/GetCardNum') {config.url = 'http://localhost:5001/api/GetCardNum'// config.url = 'http://127.0.0.1:5001/api/GetCardNum'config.headers['Content-Type'] = 'application/json'config.headers['Access-Control-Allow-Origin'] = '*'console.log('config.headers["Access-Control-Allow-Origin"]----',config.headers['Access-Control-Allow-Origin'])
}

这篇关于前端解决跨域 3 种方法 -对接读卡器时出现跨域问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/371566

相关文章

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab