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

2023-11-08 07:20

本文主要是介绍前端解决跨域 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/368535

相关文章

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

SQL中redo log 刷⼊磁盘的常见方法

《SQL中redolog刷⼊磁盘的常见方法》本文主要介绍了SQL中redolog刷⼊磁盘的常见方法,将redolog刷入磁盘的方法确保了数据的持久性和一致性,下面就来具体介绍一下,感兴趣的可以了解... 目录Redo Log 刷入磁盘的方法Redo Log 刷入磁盘的过程代码示例(伪代码)在数据库系统中,r

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进阶用法使用