使用vue 实现跨域访问第三方http请求

 

目录

 

1、需要配置vue的拦截器vue.config,js

2、引用 axios

3、被请求端需要设置允许跨域


1、需要配置vue的拦截器vue.config,js

代码如下:

const path = require('path')

const  url = 'http://127.0.0.1:19043/'

module.exports = {

  dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/aa/bb': { // 前端 包含/aa/bb 的请求就被拦截

        target:  url, // 拦截后的目标url

        changeOrigin: true, // 是否跨域 当前设为跨域

        // secure: true,

        pathRewrite: {

          '^/aa/bb': '' // 会对匹配到的请求做重写,

        }

      }

      }

    },

2、引用 axios

npm install axios

import axios from 'axios';
 
// 创建axios实例
const instance = axios.create({
  baseURL: 'http://127.0.0.1:19043/aa/bb', // 目标服务器的URL
  timeout: 1000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    'Custom-Header': 'your-custom-value' // 你想设置的header
  }
});
 
// 发送请求
instance.get('/someEndpoint')
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

3、被请求端需要设置允许跨域

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:"POST, GET, OPTIONS, DELETE"
Access-Control-Request-Headers: “自己定义的hear,多个时用逗号隔开”

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

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

相关文章

指针【理论知识速成】(3)

一.指针的使用和传值调用&#xff1a; 在了解指针的传址调用前&#xff0c;先来额外了解一下 “传值调用” 1.传值调用&#xff1a; 对于来看这个帖子的你相信代码展示胜过千言万语 #include <stdio.h> #include<assert.h> int convert(int a, int b) {int c 0…

LeetCode344 -反转字符串

LeetCode344 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1a;s [“…

Vue template到render过程,以及render的调用时机

Vue template到render过程 vue的模版编译过程主要如下&#xff1a;template -> ast -> render函数&#xff08;1&#xff09;调用parse方法将template转化为ast&#xff08;抽象语法树&#xff09;&#xff08;2&#xff09;对静态节点做优化&#xff08;3&#xff09;生…

Linux编程4.1 网络编程-前导

1、内容概述 网络的基本概念TCP/IP协议概述OSI和TCP/IP模型掌握TCP协议网络基础编程掌握UDP协议网络基础檹网络高级编程 2、计算机联网的目的 使用远程资源共享信息、程序和数据分布处理 3、基本概念 单服务与多客户端的进程间通信C/S client server 由于&#xff0c;跨计…

模型量化(二)—— 训练后量化PTQ(全代码)

训练后量化&#xff08;Post-training Quantization&#xff0c;PTQ&#xff09;是一种常见的模型量化技术&#xff0c;它在模型训练完成之后应用&#xff0c;旨在减少模型的大小和提高推理速度&#xff0c;同时尽量保持模型的性能。训练后量化对于部署到资源受限的设备上&…

【Android】TextView前增加红色必填项星号*

自定义属性 <?xml version"1.0" encoding"utf-8"?> <resources><declare-styleable name"NecessaryTextView"><attr name"necessary" format"boolean" /></declare-styleable> </resou…

通过对话式人工智能实现个性化用户体验

智能交流新时代&#xff1a;如何选择对话式人工智能产品 在快速发展的数字环境中&#xff0c;对话式人工智能正在彻底改变企业与客户互动的方式。 通过集成机器学习、自然语言处理和语音识别等先进技术&#xff0c;对话式人工智能可提供个性化、无缝的用户体验。 了解对话式人…

中间件 | Kafka - [常见问题]

INDEX 1 消息丢失1.1 消息丢失位置1.2 如何避免消息丢失 2 顺序消费 1 消息丢失 1.1 消息丢失位置 1&#xff1a;producer 向 kafka 投递消息时2&#xff1a;kafka-topic 中 leader 已经写入了消息&#xff0c;向副本写入消息前挂了时3&#xff1a;消费者从 kafka 拉取了消息&…

java正整数校验

在Java中&#xff0c;校验一个字符串是否表示正整数通常可以通过以下几种方法实现&#xff1a; 方法1&#xff1a;使用正则表达式 import java.util.regex.Pattern; import java.util.regex.Matcher;public class NumberValidationUtils {public static boolean isPositiveIn…

3月13日做题总结(Linux真题)

第一题 SPI接口的三线制有哪三线&#xff1f; A---MISO B---MOSI C---CS D---CLK 正确答案&#xff1a;ABD 解析&#xff1a;SPI通常有4根线&#xff08;四线制&#xff09;&#xff0c;可实现全双工通信 【CLK】: 串行时钟&#xff08;Serial Clock&#xff09; 【MOSI…

OSCP靶场--Depreciated

OSCP靶场–Depreciated 考点(1. graphql枚举 2.CVE-2021-4034提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.155.170 --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-13 04:19 EDT Nmap scan report for 192.168.…

平台靠不住了,独立站,自主权,LTD营销枢纽助力企业应对全球化挑战

当今全球化的市场环境中&#xff0c;我国的出海品牌和供应链面临着很大的挑战&#xff0c;但同时也蕴含着机遇。随着跨境电商的兴起&#xff0c;像亚马逊、TikTok等大的电商平台成为中国卖家走向世界的重要桥梁。不过&#xff0c;平台的政策改变和外部环境的不确定性因素给依赖…

Rabbit算法:轻量高效的加密利器

title: Rabbit算法&#xff1a;轻量高效的加密利器 date: 2024/3/13 18:14:31 updated: 2024/3/13 18:14:31 tags: Rabbit算法流密码高安全性高性能密钥调度加密解密抗攻击性 Rabbit算法起源&#xff1a; Rabbit算法是由Martin Boesgaard和Mette Vesterager提出的一种流密码算…

(C语言)strcpy与strcpy详解,与模拟实现

目录 1. strcpy strcpy模拟实现&#xff1a; 实现方法1&#xff1a; 实现方法2&#xff1a; 2. strcat strcat模拟实现&#xff1a; 1. strcpy 作用&#xff1a;完成字符串的复制。 头文件&#xff1a;<string.h> destination是字符串要复制到的地点&#xff0c;s…

这款自动引流软件居然能让你的营销效果翻倍提升!

在数字化时代&#xff0c;营销策略的高效执行对企业来说至关重要。自动引流软件作为现代企业营销工具箱中的一员&#xff0c;其重要性不言而喻。这类软件通过智能化、自动化的方式&#xff0c;将潜在客户吸引到企业的销售渠道中&#xff0c;从而为企业带来可观的收益和品牌曝光…

SpringBoot集成netty实现websocket通信

实现推送消息给指定的用户 一、依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://m…

武汉儿童医院变电所电力运维平台系统的设计及应用

彭姝麟 Acrelpsl 1 引言 2015年国务院发布《中共中央、国务院关于进一步深化电力体制改革的若干意见》&#xff08;中发[2015]9号&#xff09;&#xff0c;简称“电改9号文”。而本次新电改的重点是“三放开一独立三强化”&#xff1a;输配以外的经营性电价放开、售电业务放开…

法规解读 | 坚持总体国家安全观,新修订的《保守国家秘密法》今年5月1日起施行!

2024年2月27日&#xff0c;第十四届全国人大常委会第八次会议表决通过新修订的《中华人民共和国保守国家秘密法》&#xff08;以下简称保密法&#xff09;&#xff0c;自2024年5月1日起施行。 本次保密法修订坚持总体国家安全观&#xff0c;统筹发展与安全。 一方面吸收了一些工…

政务云安全风险分析与解决思路探讨

1.1概述 为了掌握某市政务网站的网络安全整体情况&#xff0c;在相关监管机构授权后&#xff0c;我们组织人员抽取了某市78个政务网站进行安全扫描&#xff0c;通过安全扫描&#xff0c;对该市政务网站的整体安全情况进行预估。 1.2工具扫描结果 本次利用漏洞扫描服务VSS共扫…

EDGE pkl 播放

目录 EDGE pkl 播放 python代码: EDGE pkl 播放 python代码: import os import pickle from pathlib import Path from tempfile import TemporaryDirectoryimport librosa as lr import matplotlib.animation as animation import matplotlib.pyplot as plt import numpy a…