前端解决跨域 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

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T